/ / Ordenamiento de múltiples columnas usando atributos de datos HTML5 - jquery, html5, tablas de datos, atributos de datos personalizados

Ordenación en varias columnas utilizando el atributo de datos HTML5 - jquery, html5, datatables, atributo de datos personalizados

Estoy tratando de usar el orden de varias columnas en jQuery DataTables como HTML5 data- atributos. ¿Es esto posible?

Ya he intentado esto:

<th>Firstname</th>
<th data-orderData="[ 3, 2 ]">Lastname</th>

pero no funcionó, aunque esto funciona bien:

<th data-orderable="false" data-searchable="false">Edit</th>

y he tratado de declararlo como tabla data- atributo como este:

<table id="myTable" data-columnDefs="[ {"targets": [ 5 ], "orderData": [ 5, 3, 2 ]} ]">

pero esto tampoco funcionó, mientras que esto funciona bien:

<table id="myTable" data-order="[[ 5, "asc" ], [ 3, "asc" ], [ 2, "asc" ]]">

No pude encontrar nada en la documentación oficial sobre pedidos de varias columnas con HTML5 data- atributos. ¿Es esto posible incluso realizar con HTML5? data- atributos?

Respuestas

3 para la respuesta № 1

PORQUE

Ver notas sobre Datos HTML5 * atributos página:

Hay dos puntos importantes a considerar al usar data-* atributos como opciones de inicialización:

  • jQuery convertirá automáticamente las cadenas punteadas a la notación de mayúsculas y minúsculas utilizada por DataTables (por ejemplo, use data-page-length para pageLength)
  • Si usa una cadena dentro del atributo, debe estar entre comillas dobles (y, por lo tanto, el atributo como un todo entre comillas simples). Este es otro requisito de jQuery "s debido al procesamiento de JSON data- datos.

SOLUCIÓN

Tienes que usar data-column-defs en lugar de data-columnDefs y asegúrese de estar usando doble comillas en nombres de opciones.

<table data-column-defs="[ {"targets": [ 3 ], "visible": false} ]" id="example" class="display" cellspacing="0" width="100%">

o

<table data-column-defs="[ {&quot;targets&quot;: [ 3 ], &quot;visible&quot;: false} ]" id="example" class="display" cellspacing="0" width="100%">

MANIFESTACIÓN

Ver este jsFiddle Para código y demostración.