Bootstrap 3 - Cargar table desde json

Hola,

Estoy cargando una tabla desde JSON, basándome en el ejemplo de: http://bootstrap-table.wenzhixin.net.cn/getting-started/

Desde el HTML:

$("#table7").bootstrapTable({
    url: 'json/ejecutive/data-panel7-table.json',
    columns: [{
        field: 'col1',
        title: 'Cliente'
    }, {
        field: 'col2',
        title: 'Acción Comercial'
    }, ]
});

Tengo dos dudas:

1) Cuando el json está vacio, la tabla muestra el siguiente literal: "No matching records found", me gustaría suprimir este literal.

2) Una vez cargado los datos desde el json, me gustaría ordenar las columnas usando Bootstrap, no quiero usar otras librerías externas.

¿Cómo podría hacer ambas cosas?

Muchísimas gracias,

Respuestas

El texto que se muestra cuando no hay resultados es la cadena formatNoMatches y forma parte del pequeño grupo de frases traducidas de este plugin. Tienes dos opciones para cambiarlo:

Cargar la traducción del archivo bootstrap-table-es-ES.js para mostrarlo en español.
Copiar el anterior archivo y crear una traducción propia para ti en la que borras esa traducción (el truco es que como traducción utilizas una cadena de texto vacía).

Respecto a la otra pregunta, sinceramente no la entiendo. El plugin que comentas tiene un montón de opciones para reordenar las columnas, así que no te haría falta usar nada más.

@javiereguiluz

15 septiembre 2015, 12:39

Muchas gracias, con lo que me comentas de momento me vale, ya investigaré el plugin para ordenar. Saludos

@eladerezador

15 septiembre 2015, 13:09

Buenas. se me olvidaba una cosa,

Sobre el 2 punto: Una vez cargado los datos desde el json, me gustaría ordenar las columnas usando Bootstrap, no quiero usar otras librerías externas.

He visto que Bootstrap usa los data:

<table data-height="299" data-url="data1.json" data-sort-order="desc" data-sort-name="name">
    <thead>
        <tr>
            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
            <th data-field="price" data-sortable="true">Item Price</th>
        </tr>
    </thead>
</table>

El problema es que en mi caso, pinto la cabecera (thead) mediante JavaScript, de esta manera:

$("#table6").bootstrapTable({
    url: 'json/ejecutive/data-panel6-table.json',
    columns: [{
        field: 'col1',
        title: 'aaaaa'
    }, {
        field: 'col2',
        title: 'bbbb'
    }, {        
        field: 'col3',
        title: 'ccccc'
    }, ]
});

Cómo puedo hacer para ordenar con javascript, por ejemplo la col1 y la col3. ¿Existe alguna propiedad como field o title, que sea para ordenar?

Muchas gracias,

@eladerezador

17 septiembre 2015, 17:11

Buenas,

Aquí estoy de nuevo, como me corría prisa, no he localizado como hacerlo con javascript, lo he hecho de la primera manera, con el atributo data y ya ordena correctamente.

El único problema que tengo, es que no me muestra el icono (asc o desc) cuando trato de ordenar la columna, ¿saben cuál puede ser el motivo?

Vale, es que no tenía asociado el archivo table css, ya está resuelto. Tema cerrado, aunque me gustaría saber ordenar las columnas pintando el thread con javascript.

Gracias,

@eladerezador

18 septiembre 2015, 12:16