2017-10-18 128 views
0

我已經創建了一個Datatable - 並且當UI顯示排序圖標時,單擊它不會重新排列列。Jquery Datatables - UI排序不起作用

數據來自Springboot後端。

enter image description here

的Javascript

$(document).ready(function() { 

var table = $('#salesTable').DataTable({ 
    processing: 'true', 
    serverSide: 'true', 
    ajax: {url: '/getsales', dataSrc: ''}, 

    "columnDefs": [ 
     { "data": "salesno", "render": function (data, type, row) { return '<a href=/sales/' + data + '>' + data + '</a>'; }, "targets": 0, }, 
     { "data" : "start_date", "targets" : 1 }, 
     { "data": "names", "targets" : 2 }, 
     { "data": "address", "targets" : 3 }, 
     { "data": "cmfEntry", "render": function (data, type, row) { 
       return data === true ? '<div align = "center"><span class="glyphicon glyphicon-ok"></span></div>' : 
        '<div align = "center"><span class="glyphicon glyphicon-remove"></span></div>' }, "targets": 4 } 
     ] 
    }); 
}); 

HTML

<table id="salesTable" class="display table table-striped" width="100%"> 
     <thead> 
     <tr> 
      <th class="col-xs-2">Sales No</th> 
      <th class="col-xs-2">Date</th> 
      <th class="col-xs-2">Names</th> 
      <th class="col-xs-5">Address</th> 
      <th class="col-xs-1">CMFSales</th> 
     </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 

共有5列和排序對任何人不工作的。

瀏覽器的控制檯中沒有錯誤消息。

UPDATE

http://live.datatables.net/kovuvisa/1/edit

這裏有一個數據表小提琴。請注意,只要我註釋掉ajax數據源,就會進行排序。 sort:[]數組似乎不是必需的 - 但我已經添加了它。

+0

嗨,如果你需要幫助,我建議添加dataSrc模式。基地如果很長。 – 2017-10-18 22:59:58

+0

你能解釋更多嗎? –

+0

幫助人們測試與你相同的上下文,但我想你必須在你的數據表配置中添加'sort:[true,true,false]' – 2017-10-18 23:47:50

回答

0

添加排序指令的dataTable配置陣列用相同的細胞,你列與價值布爾如果想要的或沒有排序sort: [true, true, true, true, true]

$(document).ready(function() { 

var table = $('#salesTable').DataTable({ 
    processing: 'true', 
    serverSide: 'true', 
    sort: [true, true, true, true, true], 
    ajax: {url: '/getsales', dataSrc: ''}, 

    "columnDefs": [ 
     { "data": "salesno", "render": function (data, type, row) { return '<a href=/sales/' + data + '>' + data + '</a>'; }, "targets": 0, }, 
     { "data" : "start_date", "targets" : 1 }, 
     { "data": "names", "targets" : 2 }, 
     { "data": "address", "targets" : 3 }, 
     { "data": "cmfEntry", "render": function (data, type, row) { 
       return data === true ? '<div align = "center"><span class="glyphicon glyphicon-ok"></span></div>' : 
        '<div align = "center"><span class="glyphicon glyphicon-remove"></span></div>' }, "targets": 4 } 
     ] 
    }); 
});