DataTable的Ajax使用
DataTable
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
中文网: 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自带的分页不是物理分页，如果我有一千万条数据不就嗝屁了，所以我们还是乖乖的用物理分页吧。
刚刚开始写博客，可能写的很粗糙，感谢你能看到这里。
