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自帶的分頁不是物理分頁，如果我有一千萬條數據不就嗝屁了，所以我們還是乖乖的用物理分頁吧。

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

轉載于:https://www.cnblogs.com/bkyxnc/p/9214147.html

總結

以上是生活随笔為你收集整理的DataTable的Ajax使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。