Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sorting arrow is shown for first column even when sorting is disabled

I need add "Select all" checkbox in table with using DataTable pligin. I don't found standard method for this and I use addition by manually for this. All Ok, but if I try use localization ('language' property) my "All select" checkbox disappears. I try fix is by add my code in DataTable library, but it is bad way.

  <table id="devices" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th style="padding:8px; text-align:center;">        
                <input type='checkbox' class='minimal check-all' id='check-all-device' name='check-all-device'></input>

        </th>
        <th>{% trans "STATUS" %}</th>
        <th>{% trans "DEVICE NAME" %}</th>
        <th>{% trans "ACTIONS" %}</th>
        <th></th>
      </tr>
    </thead>

    <tfoot>
        <tr>
            <th></th>
            <th>{% trans "STATUS" %}</th>
            <th>{% trans "DEVICE NAME" %}</th>
            <th>{% trans "ACTIONS" %}</th>
            <th></th>
        </tr>
    </tfoot>

    <tbody id="devices-table-rows">
      {% for device in object_list %}
        {% include "device_add_row.html" %}
      {% endfor %}
    </tbody>
  </table>

Add handlers of selection on javascript:

devicesTable = $('#devices').DataTable({
    // disable sorting first column
    'aoColumnDefs': [{
        'bSortable': false,
        'aTargets': [0] /* 1st one, start by the right */
    }],
    stateSave: false
});

// Action's select insert in to search row
$('#devices_filter').append($('#devices-actions'));    

// Settings Check ALL
var firstTh = $($($('#devices > thead').find('tr')[0]).find('th')[0]);
firstTh.removeClass("sorting_asc"); 

//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
    checkboxClass: 'icheckbox_minimal-blue',
    radioClass: 'iradio_minimal-blue'
});

// Check handlers All
var checkAll = $('input.check-all');
var checkboxes = $('input.check-single');

checkAll.on('ifChecked ifUnchecked', function(event) {
    if (event.type == 'ifChecked') {
        checkboxes.iCheck('check');
    } else {
        checkboxes.iCheck('uncheck');
    }
});

checkboxes.on('ifChanged', function(event){
    if(checkboxes.filter(':checked').length == checkboxes.length) {
        checkAll.prop('checked', 'checked');
    } else {
        checkAll.removeProp('checked');
        checkAll.prop('checked', false);
    }
    checkAll.iCheck('update');
});

Result - all right!:

enter image description here

Add using language for table localization:

var languageUrl = "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Russian.json";
}

devicesTable = $('#devices').DataTable({
    // disable sorting first column
    'aoColumnDefs': [{
        'bSortable': false,
        'aTargets': [0] /* 1st one, start by the right */
    }],
    stateSave: false,
    language: {
        "url": languageUrl
    }
});

My settings is reset:

enter image description here

like image 977
Stan Zeez Avatar asked Apr 06 '16 08:04

Stan Zeez


1 Answers

Sorting

Option orderable only controls end-user ability to sort the column. This doesn't prevent the column from being sorted programmatically.

Default value for order option which controls how the table is sorted is [[0, 'asc']]. Use this option to set initial sorting order other than first column.

For example:

devicesTable = $('#devices').DataTable({
    // disable sorting first column
    'columnDefs': [{
        'orderable': false,
        'targets': 0 /* 1st one, start by the right */
    }],
    order: [[2, 'asc']], 
    stateSave: false,
    language: {
        "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Russian.json"
    }
});

Checkboxes

You need to initialize checkboxes in drawCallback handler and use delegated event handlers. Otherwise only checkboxes on the first page would work.

Please note that I just copied parts your code related to iCheck plug-in and cannot guarantee that it will work. The important part of the example below is use of drawCallback and delegated event handlers.

devicesTable = $('#devices').DataTable({
    // disable sorting first column
    'columnDefs': [{
        'orderable': false,
        'targets': 0 /* 1st one, start by the right */
    }],
    order: [[2, 'asc']], 
    stateSave: false,
    language: {
        "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Russian.json"
    },
    drawCallback: function(settings){
       var api = this.api();

      //iCheck for checkbox and radio inputs
      $('input[type="checkbox"].minimal, input[type="radio"].minimal', api.table().node()).iCheck({
         checkboxClass: 'icheckbox_minimal-blue',
         radioClass: 'iradio_minimal-blue'
      });
    }
});

var table_node = devicesTable.table().node();

$('thead', table_node).on('ifChecked ifUnchecked', 'input.check-all', function(event) {
    var checkboxes = $('tbody input.check-single', table_node);

    if (event.type == 'ifChecked') {
        checkboxes.iCheck('check');
    } else {
        checkboxes.iCheck('uncheck');
    }
});

$('tbody', table_node).on('ifChanged', 'input.check-single', function(event) {
    var checkAll = $('thead input.check-all', table_node);

    var checkboxes = $('tbody input.check-single', table_node);

    if(checkboxes.filter(':checked').length == checkboxes.length) {
        checkAll.prop('checked', 'checked');
    } else {
        checkAll.removeProp('checked');
        checkAll.prop('checked', false);
    }
    checkAll.iCheck('update');
});
like image 152
Gyrocode.com Avatar answered Sep 22 '22 02:09

Gyrocode.com