Disable sorting for a particular column in jQuery DataTables

前端 未结 23 1493
礼貌的吻别
礼貌的吻别 2020-11-30 19:58

I am using the jQuery DataTables plugin to sort the table fields. My question is: how do I disable sorting for a particular column? I have tried with the following code, but

相关标签:
23条回答
  • 2020-11-30 20:28

    The code will look like this:

    $(".data-cash").each(function (index) {
      $(this).dataTable({
        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
          "sLengthMenu": "_MENU_ records per page",
          "oPaginate": {
            "sPrevious": "Prev",
            "sNext": "Next"
          }
        },
        "bSort": false,
        "aaSorting": []
      });
    });
    
    0 讨论(0)
  • 2020-11-30 20:30

    As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes.

    -from DataTables example - HTML5 data-* attributes - table options

    So you can use data-orderable="false" on the th of the column you don't want to be sortable. For example, the second column "Avatar" in the table below will not be sortable:

    <table id="example" class="display" width="100%" data-page-length="25">
        <thead>
            <tr>
                <th>Name</th>
                <th data-orderable="false">Avatar</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            ...[ETC]...
        </tbody>
    </table>
    

    See a working example at https://jsfiddle.net/jhfrench/6yxvxt7L/.

    0 讨论(0)
  • 2020-11-30 20:30

    Here is what you can use to disable certain column to be disabled:

     $('#tableId').dataTable({           
                "columns": [
                    { "data": "id"},
                    { "data": "sampleSortableColumn" },
                    { "data": "otherSortableColumn" },
                    { "data": "unsortableColumn", "orderable": false}
               ]
    });
    

    So all you have to do is add the "orderable": false to the column you don't want to be sortable.

    0 讨论(0)
  • 2020-11-30 20:33
    "aoColumnDefs" : [   
    {
      'bSortable' : false,  
      'aTargets' : [ 0 ]
    }]
    

    Here 0 is the index of the column, if you want multiple columns to be not sorted, mention column index values seperated by comma(,)

    0 讨论(0)
  • 2020-11-30 20:33

    you can also use negative index like this:

    $('.datatable').dataTable({
        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "aoColumnDefs": [
            { 'bSortable': false, 'aTargets': [ -1 ] }
        ]
    });
    
    0 讨论(0)
  • 2020-11-30 20:33

    You can directry use .notsortable() method on column

     vm.dtOpt_product = DTOptionsBuilder.newOptions()
                    .withOption('responsive', true)
            vm.dtOpt_product.withPaginationType('full_numbers');
            vm.dtOpt_product.withColumnFilter({
                aoColumns: [{
                        type: 'null'
                    }, {
                        type: 'text',
                        bRegex: true,
                        bSmart: true
                    }, {
                        type: 'text',
                        bRegex: true,
                        bSmart: true
                    }, {
                        type: 'text',
                        bRegex: true,
                        bSmart: true
                    }, {
                        type: 'select',
                        bRegex: false,
                        bSmart: true,
                        values: vm.dtProductTypes
                    }]
    
            });
    
            vm.dtColDefs_product = [
                DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
                DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
                DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
            ];
    
    0 讨论(0)
提交回复
热议问题