首先看看官网是怎么说排序的:
https://datatables.net/examples/basic_init/table_sorting.html
我用这种方式试了一下,图标是出来了,也可以点击,but点击之后没什么用,数据还是原来的顺序。
table = $('#datatable').DataTable({
// "scrollX": true,
"scrollY": $(window).height() - 300,
"stateSave": false,
autoWidth: false,
ordering: true, //排序
searching: false, //不显示搜索框
pagingType: "full", //分页按钮类型显示上下页、首尾页
processing: true, //是否显示“加载中”
scrollCollapse: false, //当显示更少的记录时,是否允许表格减少高度
serverSide: true, //服务器请求
destroy: true, //
lengthMenu: [10, 20, 50, 100],
ajax: {
url: baseurl,
type: 'post',
dataType: 'json',
data: {},
},
});
我是用ajax请求后台的数据,也存在分页,但我的需求是点击表头只排当前页的数据。因此找了个第三方js实现该功能。(前提先把ordering设为false,否则会有冲突)
sorttable.js
1、下载sorttable.js:
直接下载:https://download.csdn.net/download/Swn__/14954516
官网:http://www.kryogenix.org/code/browser/sorttable/,(不需要jquery.js)
2、使用
包括JavaScript库放一个链接到它在你的页面的头,像这样:
<script src="sorttable.js"></script>
通过为表提供“可排序”类,将其标记为可排序的表:
<table class="sortable">
3、注意
该库的JavaScript文件称为 sorttable(两个T),但是您添加到表中的类为 sortable(一个T)。
4、美化
这就是您所需要的。现在,您可以通过单击标题在表中进行列排序。为了美观起见,您可能需要在样式表中添加以下样式,或者根据此样式自己制作一些样式:
/* Sortable tables */
table.sortable thead {
background-color:#eee;
color:#666666;
font-weight: bold;
cursor: default;
}
至此,当你点击表头时可以进行排序,如果想不对某列排序,只要在此列的<th>
标签加上class="sorttable_nosort"
即可。
但他不支持分页。
补充
若要按条件查询后重新生成表格,此时排序不起作用,需要在生成新表格之前先销毁 $("#datatable").DataTable().destroy();
对象
$("#btn-search").click(function() {
$("#datatable").DataTable().destroy();
table = $('#datatable').DataTable({
// "scrollX": true,
"scrollY": $(window).height() - 300,
"stateSave": false,
autoWidth: false,
ordering: false, //排序
searching: false, //不显示搜索框
pagingType: "full", //分页按钮类型显示上下页、首尾页
processing: true, //是否显示“加载中”
scrollCollapse: false, //当显示更少的记录时,是否允许表格减少高度
serverSide: true, //服务器请求
destroy: true, //
lengthMenu: [10, 20, 50, 100],
ajax: {
url: baseurl,
type: 'post',
dataType: 'json',
data: {},
},
});
})