DataTable

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

官网: https://datatables.net/

中文网: http://www.datatables.club/

用法：

先从最简单的开始：导入导入dataTable需要的js与css- css http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
- js  http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

HTML

<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>

Js : 初始化表格

$(document).ready(function() {$('#example').DataTable( {"ajax": "data/objects.txt", "columns": [{ "data": "name" },{ "data": "position" },{ "data": "office" },{ "data": "extn" },{ "data": "start_date" },{ "data": "salary" }]} );
} );

这是使用Ajax的例子，知道的朋友都知道现在都是使用前后端分离+Ajax返回Json数据来进行数据的传递的。dataTable支持 Ajax + Josn 的形式返回数据并解析渲染。

json : 数据格式

{ "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }

json就不多说了，另外推荐一个格式化json的网站，蛮好用的 https://www.bejson.com/

完整案例：

<table id="table" class="table table-bordered table-hover"><thead><th width="10%">成交编号</th><th width="5%">签约人</th><th width="5%">买方</th><th width="5%">卖方</th><th width="10%">房源信息</th><th width="10%">总价(元)</th><th width="5%">成交时间</th><th width="6%">状态</th><th width="15%">操作</th></thead><tbody> <!--tbody中的内容dataTable会自动填充--></tbody>
</table>
- 这里table的Id是初始化要用到的

js代码：

 var table = $("#table"); //定义表格接下来好初始化 table.dataTable({       //表格渲染开头时可以设置一些配置参数（如果你刚开始接触也可以啥都不配）"bSort" : false,    // processing : true,  //是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)serverSide : true,  //是否开启服务器模式searching : false,  //是否允许Datatables开启本地搜索autoWidth : true,   //自适应宽度language : {url : '/js/plugins/dataTables/language/Chinese.json' //DataTables语言配置选项},ajax : {url : "/deal/getxxxList", //访问路径，返回Json数据data : function(d) { //传递参数 rowCode1 = 0;planify(d);d.timeStart = $("#timeStart").val();d.timeEnd = $("#timeEnd").val();d.departmentId = $("#selectDepartment option:selected").val();d.price = $("#selectPrice option:selected").val();d.keywords = $("#keywords").val();d.dealStatus = $("#selectDealStatus option:selected").val();d.paidStatus = $("#selectPaidStatus option:selected").val();d.alreadySplit = $("#selectAlreadySplit option:selected").val();},type : "POST"   //设置请求类型},columnDefs : [ {  //设置列定义初始化属性"defaultContent" : "", //为列设置默认的静态内容"targets" : "_all"  //指定所有列} ],columns : [ //数据渲染，固定格式,下面每一个对应表格一个td{"name" : "dealCode", //后台返回json数据 这是名"data" : "dealCode"  //这是值，一定要对应}, {"name" : "dealUserName","data" : "dealUserName"},{"name" : "custName","data" : "custName"},{"name" : "ownerName","data" : "ownerName"},{"name" : "houseSource","data" : function(row) { //这是第二种写法，运用场景是你要做判断写js的时候可以这样写//这个"row"就是数据源，可以通过 row.xx来获取json返回的数据，名字要对上var projectStr = "";if (typeof (row.projectName) == "undefined" && row.houseSourceProject == undefined)              {return "";}var buildArea = "";if (parseInt(row.buildArea) > 0) {buildArea = row.buildArea;}//优先取楼盘名称if(row.houseSourceProject != undefined && row.houseSourceProject != ""){projectStr = row.houseSourceProject;}else if(row.projectName != undefined && row.projectName != ""){projectStr = row.projectName;}else{projectStr = "";}return projectStr + " " + buildArea + "㎡"; // 返回的值就是表格td的值}},{"name" : "dealPrice","data" : "dealPrice"},{"name" : "dealTimeStr","data" : "dealTimeStr"},{"name" : "dealStatus","data" : function(row) {var status = row.dealStatus;var split = row.alreadySplit;var paid = row.paidStatus;var s1 = "";var s2 = "";var s3 = "";if (status == 0) {s1 = "未审核<br>";} else if (status == 1) {s1 = "已审核<br>";} else if (status == 2) {s1 = "已作废<br>";} else {s1 = "<br>";}if (split == 0) {s2 = "未分配<br>";} else if (split == 1) {s2 = "已分配<br>";} else {s2 = "<br>"}if (paid == 1) {s3 = "已回款";} else if (paid == 0) {s3 = "未回款";} else if (paid == 2) {s3 = "部分回款";}return s1 + s2 + s3;}},{"name" : "doElse","data" : function(row) {var html = "<table><tr>";if (row.dealStatus == 0) {html += "<td><a class='get_detail btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+",1,\"" + row.dealCode +"\")' dealId='"+row.dealId+"'><span>查看</span></a></td>";} else if (row.dealStatus == 1) {html += "<td><a class='get_detail btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+",2,\"" + row.dealCode +"\")'><span>查看</span></a></td>";if (row.paidStatus != 1) {html += "<td><a data-toggle='modal' onclick='toGetPaid("+ row.dealId+ ")' data-target='#myModal3' class='btn-xs btn btn-outline btn-light'>收款</a></td>";}html += "<td><a class='get_detail btn-xs btn btn-outline btn-light'  onclick='preview("+row.dealId+",\"" + row.dealCode +"\")'>业绩确认单</a></td>";} else {html += "<td><a class='get_detail  btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+",2,\"" + row.dealCode +"\")' dealId='"+row.dealId+"'><span>查看</span></a></td>";}html += "<td><a onclick='deleteDealDetail("+ row.dealId+ ")' class='btn-xs btn btn-outline btn-light'>删除</a></td>";html += "</tr></table>";return html;}} ]});

注意的几个点：我刚开始做的时候也是一脸懵b的。

• 不止我这一种写法，有很多种写法，我这种的应用场景适用于 Ajax + json 数据来做。（我也只会这一种，我一个写后台的我容易吗）
• 参数配置丰富到你想吐，文档都在官网中有，我还是写出来吧：http://www.datatables.club/reference/option/
• 数据一定要对上，少一个都不行，你表格中写了多少个th，你在columns中就要写多少个。

其实非常的简单，只要你的数据个数能够对的上并且后台数据是标准json格式，你没有打错的话，都是没毛病的。

顺便讲讲dataTable的分页:

@RequestMapping(value = "getXXXList", produces = "text/html;charset=UTF-8")
@ResponseBody
public String getOldHouseList(HttpServletRequest request, DataTableFormVo vo) {//注意这个 DataTableFormVo 参数这个参数是用来接收dataTable传递过来的一个vo对象，其中就包括分页必须的两个参数，第几条到第几条，再利用mysql的limit进行分页就很简单了//业务代码就不写了return resultVo.toString();}

到这里就发现，dataTable不是自带分页吗，怎么还要用limit了

这么说你就明白了，dataTable自带的分页不是物理分页，如果我有一千万条数据不就嗝屁了，所以我们还是乖乖的用物理分页吧。

刚刚开始写博客，可能写的很粗糙，感谢你能看到这里。