ปิดใช้งานการเรียงลำดับสำหรับคอลัมน์เฉพาะใน jQuery DataTables

ฉันใช้ปลั๊กอิน jQuery DataTablesเพื่อเรียงลำดับเขตข้อมูลตาราง คำถามของฉันคือฉันจะปิดการเรียงลำดับสำหรับคอลัมน์ใดคอลัมน์หนึ่งได้อย่างไร ฉันลองด้วยรหัสต่อไปนี้ แต่มันไม่ทำงาน:

"aoColumns": [
  { "bSearchable": false },
  null
]   

ฉันได้ลองใช้รหัสต่อไปนี้แล้ว:

"aoColumnDefs": [
  {
    "bSearchable": false,
    "aTargets": [ 1 ]
  }
]

แต่สิ่งนี้ยังไม่ได้ผลลัพธ์ที่ต้องการ

นี่คือสิ่งที่คุณกำลังมองหา:

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});

ในขณะที่ DataTables 1.10.5 ตอนนี้เป็นไปได้ที่จะกำหนดตัวเลือกการเริ่มต้นโดยใช้แอตทริบิวต์ HTML5 data- *

- จากตัวอย่าง DataTables - คุณลักษณะ HTML5 data- * - ตัวเลือกตาราง

ดังนั้นคุณสามารถใช้data-orderable="false"ในthคอลัมน์ที่คุณไม่ต้องการที่จะเรียงลำดับ ตัวอย่างเช่นคอลัมน์ที่สอง "Avatar" ในตารางด้านล่างจะไม่สามารถจัดเรียงได้:

<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>

ดูตัวอย่างการทำงานที่ https://jsfiddle.net/jhfrench/6yxvxt7L/

หากต้องการปิดใช้งานการเรียงลำดับคอลัมน์แรกให้ลองใช้รหัสด้านล่างใน jQuery DataTables null หมายถึงการเปิดใช้งานการเรียงลำดับที่นี่

$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );

ปิดใช้งานการเรียงลำดับในคอลัมน์ใน jQuery Datatables

ใช้ DataTables 1.9.4 ฉันได้ปิดการใช้งานการเรียงลำดับสำหรับคอลัมน์แรกด้วยรหัสนี้:

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

แก้ไข:

คุณสามารถปิดได้โดยใช้no-sortชั้นบน<th>,

และใช้รหัสการเริ่มต้นนี้:

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

แก้ไข 2

ในตัวอย่างนี้ฉันใช้ Datables กับ Bootstrap ติดตามโพสต์บล็อกเก่า ขณะนี้มีการเชื่อมโยงเป็นหนึ่งเดียวกับวัสดุปรับปรุงเกี่ยวกับการจัดแต่งทรง DataTables กับบูต

สิ่งที่ฉันใช้คือเพียงเพิ่มแอตทริบิวต์ที่กำหนดเองใน thead td และควบคุมการเรียงลำดับโดยการตรวจสอบค่า attr นั้นโดยอัตโนมัติ

ดังนั้นรหัส HTML จะเป็น

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

และจาวาสคริปต์สำหรับการเริ่มต้นชุดข้อมูลจะเป็น (มันจะได้รับข้อมูลการเรียงลำดับแบบไดนามิกจากตารางมันเอง;)

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});

columnDefsตอนนี้รับชั้นเรียน ฉันว่านี่เป็นวิธีที่ต้องการหากคุณต้องการระบุคอลัมน์ที่จะปิดการใช้งานในมาร์กอัปของคุณ:

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

จากนั้นใน JS ของคุณ:

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});

นี่คือสิ่งที่คุณสามารถใช้เพื่อปิดการใช้งานคอลัมน์บางอย่างที่จะปิดการใช้งาน:

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

ดังนั้นสิ่งที่คุณต้องทำคือเพิ่ม "สั่ง": เท็จในคอลัมน์ที่คุณไม่ต้องการที่จะจัดเรียง

$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);

สำหรับปิดใช้งานการเรียงลำดับคอลัมน์เดี่ยวลองตัวอย่างนี้:

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

สำหรับหลายคอลัมน์ลองตัวอย่างนี้: คุณเพียงแค่ต้องเพิ่มหมายเลขคอลัมน์ โดยค่าเริ่มต้นมันเริ่มต้นจาก 0

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>  

ที่นี่ใช้Column 3งานได้เท่านั้น

ตั้งแต่1.10.5เพียงรวม

'สั่งได้: เท็จ'

ใน columnDefs และกำหนดเป้าหมายคอลัมน์ของคุณด้วย

'เป้าหมาย: [0,1]'

ตารางที่ควรชอบ:

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});

หากคุณตั้งค่าorderableคุณสมบัติคอลัมน์ FIRST เป็น false คุณต้องตั้งค่าorderคอลัมน์เริ่มต้นมิฉะนั้นจะไม่ทำงานเนื่องจากคอลัมน์แรกคือคอลัมน์ลำดับเริ่มต้น ตัวอย่างด้านล่างปิดใช้งานการเรียงลำดับในคอลัมน์แรก แต่ตั้งค่าคอลัมน์ที่สองเป็นคอลัมน์ลำดับเริ่มต้น (ดัชนี index dataTables ที่จำได้จะเป็นศูนย์)

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

นี่0คือดัชนีของคอลัมน์หากคุณต้องการให้เรียงหลายคอลัมน์ไม่ต้องพูดถึงให้แยกค่าดัชนีคอลัมน์ด้วยcomma(,)

เพื่ออัปเดตคำตอบของ Bhavish (ซึ่งฉันคิดว่าสำหรับ DataTables เวอร์ชันเก่ากว่าและไม่ได้ผลสำหรับฉัน) ฉันคิดว่าพวกเขาเปลี่ยนชื่อคุณลักษณะ ลองสิ่งนี้:

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>

ใช้คลาส:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>dummy@email.com</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

ตอนนี้คุณสามารถให้คลาส "nosort" แก่ <TH>

สิ่งนี้ใช้ได้สำหรับฉันในคอลัมน์เดียว

 $('#example').dataTable( {
"aoColumns": [
{ "bSortable": false 
 }]});

หากคุณต้องซ่อนบางคอลัมน์เช่นฉันซ่อนคอลัมน์นามสกุล ฉันเพิ่งจะเชื่อมต่อ fname, lname ดังนั้นฉันจึงทำการสืบค้น แต่ซ่อนคอลัมน์นั้นจากส่วนหน้า การแก้ไขใน Disable sorting ในสถานการณ์เช่นนี้คือ:

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

สังเกตว่าฉันมีฟังก์ชั่นการซ่อนที่นี่

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

จากนั้นฉันก็รวมมันเป็น "aoColumnDefs"

1. ใช้รหัสต่อไปนี้เพื่อปิดการสั่งซื้อในคอลัมน์แรก:

   $('#example').dataTable( {
     "columnDefs": [
       { "orderable": false, "targets": 0 }
     ]
   } );

2. หากต้องการปิดการสั่งซื้อเริ่มต้นคุณสามารถใช้:

   $('#example').dataTable( {
        "ordering": false, 
   } );

คุณสามารถใช้ method. nootsortable () โดยตรงในคอลัมน์

 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()
        ];

มีสองวิธีหนึ่งถูกกำหนดใน html เมื่อคุณกำหนดส่วนหัวของตาราง

<thead>
  <th data-orderable="false"></th>
</thead>

อีกวิธีคือใช้จาวาสคริปต์เช่นคุณมีตาราง

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

แล้ว

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);

คุณสามารถใช้ดัชนีลบเช่นนี้:

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});

รหัสจะมีลักษณะดังนี้:

$(".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": []
  });
});

นี่คือคำตอบ!

targets คือหมายเลขคอลัมน์เริ่มจาก 0

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

กำหนด class "no-sort" ใน th ของตารางจากนั้นเพิ่ม css. no-sort {pointer-events: none! important; เคอร์เซอร์: ค่าเริ่มต้น! สำคัญภาพพื้นหลัง: ไม่มี! สำคัญ; } โดยสิ่งนี้มันจะซ่อนลูกศร updown และ disble event ในหัว