datatables + sorttable.js 列排序

首先看看官网是怎么说排序的：
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: {},
			},
		});
})