Dana Dana - 14 days ago 6
jQuery Question

Datatable with icons in it not sorting column based on other column

I have a datatable with data-bind values:

<table class="table" style="width: 100%;" id="TableC">
<thead>
<tr>
<th>Vehicle</th>
<th>Serial</th>
<th>Power</th>
<th>Lock</th>
<th>Lock2</th>
</tr>
</thead>
<tbody data-bind="foreach: techlist">
<tr>
<td data-bind="text: Vehicle">Vehicle</td>
<td data-bind="text: Serial">Serial</td>
<td data-bind="text: Power">Power</td>
<td>
<span data-bind="visible: $data.Lock==0" style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-unlock fa-stack-2x" style="color:#71BF3D"></i></span>
<span data-bind="visible: $data.Lock==1" style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-lock fa-stack-2x" style="color:#E74C3C"></i></span>
<span data-bind="visible:$data.Lock=='-'">-</span>
</td>
<td data-bind="text: Lock"></td>
</tr>
</tbody>
</table>


and the .js for it:

TableC = $("#TableC").DataTable({
bSortable: true,
bPaginate: false,
//"searching": false,
"info": false,
"bFilter": false,
"aoColumnDefs": [
{ targets: 0 },
{ targets: 1 },
{ targets: 2 },
{ targets: 3, orderData: 4 },
{ bSearchable: false, targets: 4 }
]
});


When I first load the datatable it has more than one rows but when I press the filter for column 'Lock' it should filter the icons according to the column 'Lock2' but instead it displays one row, with both icons and the "-" sign and the value for 'Lock2' dissapears and the other fields are populated with the strings inside the td marks: Vehicle, Serial and Power.

What am I doing wrong?

EDIT!

var displayinfo = [];
displayinfo.push({
Vehicle: "05", Serial: "925", Power:"30V",
Lock: 1
});
displayinfo.push({
Vehicle: "06", Serial: "937", Power:"60V",
Lock: 0
});
displayinfo.push({
Vehicle: "07", Serial: "835", Power:"50V",
Lock: 1
});
techstatuslist(displayinfo);


All the values are with "-" when the list should be empty...

displayinfo.push({
Vehicle: "-", Serial: "-", Power:"-",
Lock: "-"
});

Answer
var displayinfo = [];
displayinfo.push({
                Vehicle: "05", Serial: "925", Power:"30V", 
                Lock: 1
            });
displayinfo.push({
                Vehicle: "06", Serial: "937", Power:"60V", 
                Lock: 0
            });
displayinfo.push({
                Vehicle: "07", Serial: "835", Power:"50V", 
                Lock: 1
            });
TableC = $("#TableC").DataTable({
    data: displayInfo,
    ordering: true,
    paging: false,
    //"searching": false,
    "info": false,
    "searching": false,
    columns: [ 
      { data: "Vehicle", title: "Vehicle" },
      { data: "Serial", title: "Serial" },
      { data: "Power", title: "Power" },
      { data: "Lock", title: "Lock" },
      { data: "Lock", title: "Lock2" }
    ],
    "columnDefs": [ {
       "targets": 3,
       "render": function ( data, type, full, meta ) {
          // If it is rendering the cell contents
          if(type === 'display') {
             switch(data) {
                case 0:
                  return '<span style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-unlock fa-stack-2x" style="color:#71BF3D"></i></span>';
                case 1:
                  return '<span style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-lock fa-stack-2x" style="color:#E74C3C"></i></span>';
                default:
                  return '<span>-</span>';
               }
             }

             // Your code implies that lock could be a number or a string ('-')
             // So checking it first to see if we can convert it.  If not then
             // assign -1 as our numeric value.  If we can convert it to a
             // numeric value for sorting and filtering.
             return (isNaN(data)) ? -1 : +data;
          }
      }, 
{
       "targets": 4,
       "render": function ( data, type, full, meta ) {
          // If it is rendering the cell contents
          if(type === 'display') {
              return data;
          }

          // Your code implies that lock could be a number or a string ('-')
          // So checking it first to see if we can convert it.  If not then
          // assign -1 as our numeric value.  If we can convert it to a
          // numeric value for sorting and filtering.
          return (isNaN(data)) ? -1 : +data;
        }
      }]
});

Ok so with the above all you need is an empty table element. You should no longer need to specify a "thead" or "tbody" in the HTML the plugin will create those automatically. I tied Lock and Lock2 columns to the same data item so sorting on either column will sort based on the numeric "Lock" value since I specified a custom renderer in the columnDef options.

I coded this blind though so hopefully it works out of the box.

Also note I changed your options parameters from the legacy definition to the current 1.10 definitions. Most of the legacy parameter names are deprecated so aren't safe to use unless you want headaches in future versions.

Let me know if this works out.

EDIT: sorry forgot to add in the data binding. Reference: https://datatables.net/manual/data/

Comments