DataTable

Datatables是一款jquery表格插件。它是一個(gè)高度靈活的工具，可以將任何HTML表格添加高級(jí)的交互功能。

官網(wǎng): https://datatables.net/

中文網(wǎng): http://www.datatables.club/

用法：

先從最簡(jiǎn)單的開(kāi)始：導(dǎo)入導(dǎo)入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的例子，知道的朋友都知道現(xiàn)在都是使用前后端分離+Ajax返回Json數(shù)據(jù)來(lái)進(jìn)行數(shù)據(jù)的傳遞的。dataTable支持 Ajax + Josn 的形式返回?cái)?shù)據(jù)并解析渲染。

json : 數(shù)據(jù)格式

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

json就不多說(shuō)了，另外推薦一個(gè)格式化json的網(wǎng)站，蠻好用的 https://www.bejson.com/

完整案例：

<table id="table" class="table table-bordered table-hover"><thead><th width="10%">成交編號(hào)</th><th width="5%">簽約人</th><th width="5%">買方</th><th width="5%">賣方</th><th width="10%">房源信息</th><th width="10%">總價(jià)(元)</th><th width="5%">成交時(shí)間</th><th width="6%">狀態(tài)</th><th width="15%">操作</th></thead><tbody> <!--tbody中的內(nèi)容dataTable會(huì)自動(dòng)填充--></tbody> </table> - 這里table的Id是初始化要用到的

js代碼：

var table = $("#table"); //定義表格接下來(lái)好初始化 table.dataTable({ //表格渲染開(kāi)頭時(shí)可以設(shè)置一些配置參數(shù)（如果你剛開(kāi)始接觸也可以啥都不配）"bSort" : false, // processing : true, //是否顯示處理狀態(tài)(排序的時(shí)候，數(shù)據(jù)很多耗費(fèi)時(shí)間長(zhǎng)的話，也會(huì)顯示這個(gè))serverSide : true, //是否開(kāi)啟服務(wù)器模式searching : false, //是否允許Datatables開(kāi)啟本地搜索autoWidth : true, //自適應(yīng)寬度language : {url : '/js/plugins/dataTables/language/Chinese.json' //DataTables語(yǔ)言配置選項(xiàng)},ajax : {url : "/deal/getxxxList", //訪問(wèn)路徑，返回Json數(shù)據(jù)data : function(d) { //傳遞參數(shù) 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" //設(shè)置請(qǐng)求類型},columnDefs : [ { //設(shè)置列定義初始化屬性"defaultContent" : "", //為列設(shè)置默認(rèn)的靜態(tài)內(nèi)容"targets" : "_all" //指定所有列} ],columns : [ //數(shù)據(jù)渲染，固定格式,下面每一個(gè)對(duì)應(yīng)表格一個(gè)td{"name" : "dealCode", //后臺(tái)返回json數(shù)據(jù) 這是名"data" : "dealCode" //這是值，一定要對(duì)應(yīng)}, {"name" : "dealUserName","data" : "dealUserName"},{"name" : "custName","data" : "custName"},{"name" : "ownerName","data" : "ownerName"},{"name" : "houseSource","data" : function(row) { //這是第二種寫法，運(yùn)用場(chǎng)景是你要做判斷寫js的時(shí)候可以這樣寫//這個(gè)"row"就是數(shù)據(jù)源，可以通過(guò) row.xx來(lái)獲取json返回的數(shù)據(jù)，名字要對(duì)上var projectStr = "";if (typeof (row.projectName) == "undefined" && row.houseSourceProject == undefined) {return "";}var buildArea = "";if (parseInt(row.buildArea) > 0) {buildArea = row.buildArea;}//優(yōu)先取樓盤名稱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 +"\")'>業(yè)績(jī)確認(rèn)單</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;}} ]});

注意的幾個(gè)點(diǎn)：我剛開(kāi)始做的時(shí)候也是一臉懵b的。

• 不止我這一種寫法，有很多種寫法，我這種的應(yīng)用場(chǎng)景適用于 Ajax + json 數(shù)據(jù)來(lái)做。（我也只會(huì)這一種，我一個(gè)寫后臺(tái)的我容易嗎）
• 參數(shù)配置豐富到你想吐，文檔都在官網(wǎng)中有，我還是寫出來(lái)吧：http://www.datatables.club/reference/option/
• 數(shù)據(jù)一定要對(duì)上，少一個(gè)都不行，你表格中寫了多少個(gè)th，你在columns中就要寫多少個(gè)。

其實(shí)非常的簡(jiǎn)單，只要你的數(shù)據(jù)個(gè)數(shù)能夠?qū)Φ纳喜⑶液笈_(tái)數(shù)據(jù)是標(biāo)準(zhǔn)json格式，你沒(méi)有打錯(cuò)的話，都是沒(méi)毛病的。

順便講講dataTable的分頁(yè):

@RequestMapping(value = "getXXXList", produces = "text/html;charset=UTF-8") @ResponseBody public String getOldHouseList(HttpServletRequest request, DataTableFormVo vo) {//注意這個(gè) DataTableFormVo 參數(shù)這個(gè)參數(shù)是用來(lái)接收dataTable傳遞過(guò)來(lái)的一個(gè)vo對(duì)象，其中就包括分頁(yè)必須的兩個(gè)參數(shù)，第幾條到第幾條，再利用mysql的limit進(jìn)行分頁(yè)就很簡(jiǎn)單了//業(yè)務(wù)代碼就不寫了return resultVo.toString();}

到這里就發(fā)現(xiàn)，dataTable不是自帶分頁(yè)嗎，怎么還要用limit了

這么說(shuō)你就明白了，dataTable自帶的分頁(yè)不是物理分頁(yè)，如果我有一千萬(wàn)條數(shù)據(jù)不就嗝屁了，所以我們還是乖乖的用物理分頁(yè)吧。

剛剛開(kāi)始寫博客，可能寫的很粗糙，感謝你能看到這里。

轉(zhuǎn)載于:https://www.cnblogs.com/bkyxnc/p/9214147.html

總結(jié)

以上是生活随笔為你收集整理的DataTable的Ajax使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。