當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Jquery DataTable服务端分页的最佳实现

發(fā)布時間：2025/4/5 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Jquery DataTable服务端分页的最佳实现小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

index.html

<!DOCTYPE html> <html> <head><title>Datatable-serverSide 自行封裝請求參數(shù)和返回?cái)?shù)據(jù)例子</title><link rel="stylesheet" href="asset/lib/bootstrap-2.3.2/css/bootstrap.min.css" media="screen"><link rel="stylesheet" href="asset/lib/bootstrap-2.3.2/css/bootstrap-responsive.min.css" media="screen"><link rel="stylesheet" href="asset/lib/font-awesome-4.2.0/css/font-awesome.min.css"><link rel="stylesheet" href="asset/lib/dataTables-1.10.7/plugins/integration/bootstrap/2/dataTables.bootstrap.css"><link rel="stylesheet"href="asset/lib/dataTables-1.10.7/plugins/integration/font-awesome/dataTables.fontAwesome.css"><link rel="stylesheet" href="asset/css/user-manage.css"> </head> <body> <div class="container-fluid"><div class="row-fluid"><div class="span12" id="content"><div class="row-fluid"><div class="navbar" id="breadcrumb"><div class="navbar-inner"><ul class="breadcrumb"><li><a href="#">首頁</a><span class="divider">/</span></li><li class="active">用戶管理</li></ul></div></div></div><div class="row-fluid"><div class="span12"><div class="btn-toolbar"><div class="pull-right"><div class="input-append"><input type="text" placeholder="模糊查詢" id="fuzzy-search"><div class="btn-group"><button type="button" class="btn" id="btn-simple-search"><iclass="fa fa-search"></i></button><button type="button" class="btn" title="高級查詢" id="toggle-advanced-search"><i class="fa fa-angle-double-down"></i></button></div></div></div><button type="button" class="btn btn-primary" id="btn-add"><i class="fa fa-plus"></i> 添加</button><button type="button" class="btn btn-danger" id="btn-del"><i class="fa fa-remove"></i> 批量刪除</button></div></div></div><div class="row-fluid" style="display:none;" id="div-advanced-search"><form class="form-inline well"><span>姓名:</span><input type="text" class="input-medium" placeholder="姓名" id="name-search"><span>職位:</span><input type="text" class="input-medium" placeholder="職位" id="position-search"><span>工作地點(diǎn):</span><input type="text" class="input-medium" placeholder="工作地點(diǎn)" id="office-search"><span>編號:</span><input type="text" class="input-medium" placeholder="編號" id="extn-search"><span>在線狀態(tài):</span><select class="input-small" id="status-search"><option value="">全部</option><option value="1">在線</option><option value="0">離線</option></select><select class="input-small" id="role-search"><option value="">全部</option><option value="1">管理員</option><option value="0">操作員</option></select><button type="button" class="btn" id="btn-advanced-search"><i class="fa fa-search"></i> 查詢</button></form></div><div class="block info-block" id="user-view"><div class="navbar navbar-inner block-header"><div class="block-title">用戶詳情</div><div class="header-buttons"><button type="button" class="btn btn-primary" id="btn-view-edit">修改</button></div></div><div class="block-content info-content clearfix"><div class="row-fluid"><div class="span4"><label class="prop-name">編號:</label><div class="prop-value" id="extn-view"></div></div><div class="span4"><label class="prop-name">姓名:</label><div class="prop-value" id="name-view"></div></div><div class="span4"><label class="prop-name">角色:</label><div class="prop-value" id="role-view"></div></div></div><div class="row-fluid"><div class="span4"><label class="prop-name">職位:</label><div class="prop-value" id="position-view"></div></div><div class="span4"><label class="prop-name">薪水:</label><div class="prop-value" id="salary-view"></div></div><div class="span4"><label class="prop-name">狀態(tài):</label><div class="prop-value" id="status-view"></div></div></div><div class="row-fluid"><div class="span4"><label class="prop-name">入職時間:</label><div class="prop-value" id="start-date-view"></div></div><div class="span8"><label class="prop-name">辦公地點(diǎn):</label><div class="prop-value" id="office-view"></div></div></div><div class="row-fluid"><div class="span12"><label class="prop-name">備注:</label><div class="prop-value"></div></div></div></div></div><div class="block info-block" id="user-add" style="display:none;"><div class="navbar navbar-inner block-header"><div class="block-title">添加賬戶</div><div class="header-buttons"><button type="button" class="btn btn-primary" id="btn-save-add">確定添加</button><button type="button" class="btn btn-cancel">取消</button></div></div><div class="block-content info-content clearfix"><form id="form-add"><div class="control-group"><label class="control-label" for="extn-add"><spanclass="red-asterisk">*</span>編號:</label><div class="controls"><input type="text" id="extn-add" name="extn-add"></div></div><div class="control-group"><label class="control-label" for="name-add"><spanclass="red-asterisk">*</span>姓名:</label><div class="controls"><input type="text" id="name-add" name="name-add"></div></div><div class="control-group"><label class="control-label" for="role-add">角色:</label><div class="controls"><select id="role-add" name="role-add"><option value="1" selected>管理員</option><option value="0">操作員</option></select></div></div><div class="control-group"><label class="control-label" for="position-add">職位:</label><div class="controls"><input type="text" id="position-add" name="position-add"></div></div><div class="control-group"><label class="control-label" for="salary-add">薪水:</label><div class="controls"><input type="text" id="salary-add" name="salary-add"></div></div><div class="control-group"><label class="control-label" for="start-date-add">入職時間:</label><div class="controls"><input type="text" id="start-date-add" name="start-date-add"></div></div><div class="control-group"><label class="control-label" for="office-add">辦公地點(diǎn):</label><div class="controls"><input type="text" class="xlarge" id="office-add" name="office-add"></div></div><div class="control-group"><label class="control-label" for="remark-add">備注:</label><div class="controls"><input type="text" class="xxxlarge" id="remark-add" name="remark-add"></div></div></form></div></div><div class="block info-block" id="user-edit" style="display:none;"><div class="navbar navbar-inner block-header"><div class="block-title">修改賬戶:<span id="title-edit"></span></div><div class="header-buttons"><button type="button" class="btn btn-primary" id="btn-save-edit">保存更改</button><button type="button" class="btn btn-cancel">取消</button></div></div><div class="block-content info-content clearfix"><form id="form-edit"><div class="control-group"><label class="control-label" for="extn-edit"><spanclass="red-asterisk">*</span>編號:</label><div class="controls"><input type="text" id="extn-edit" name="extn-edit"></div></div><div class="control-group"><label class="control-label" for="name-edit"><spanclass="red-asterisk">*</span>姓名:</label><div class="controls"><input type="text" id="name-edit" name="name-edit"></div></div><div class="control-group"><label class="control-label" for="role-edit">角色:</label><div class="controls"><select id="role-edit" name="role-edit"><option value="1" selected>管理員</option><option value="0">操作員</option></select></div></div><div class="control-group"><label class="control-label" for="position-edit">職位:</label><div class="controls"><input type="text" id="position-edit" name="position-edit"></div></div><div class="control-group"><label class="control-label" for="salary-edit">薪水:</label><div class="controls"><input type="text" id="salary-edit" name="salary-edit"></div></div><div class="control-group"><label class="control-label" for="start-date-edit">入職時間:</label><div class="controls"><input type="text" id="start-date-edit" name="start-date-edit"></div></div><div class="control-group"><label class="control-label" for="office-edit">辦公地點(diǎn):</label><div class="controls"><input type="text" class="xlarge" id="office-edit" name="office-edit"></div></div><div class="control-group"><label class="control-label" for="remark-edit">備注:</label><div class="controls"><input type="text" class="xxxlarge" id="remark-edit" name="remark-edit"></div></div></form></div></div><div class="row-fluid"><div class="span12" id="div-table-container"><table class="table table-striped table-bordered table-hover table-condensed" id="table-user"cellspacing="0" width="100%"><thead><tr><th><input type="checkbox" name="cb-check-all"></th><th>姓名</th><th>職位</th><th>狀態(tài)</th><th>入職時間</th><th>操作</th></tr></thead><tbody></tbody><tfoot><tr><th><input type="checkbox" name="cb-check-all"></th><th>姓名</th><th>職位</th><th>狀態(tài)</th><th>入職時間</th><th>操作</th></tr></tfoot></table></div></div></div></div> </div> <script src="asset/lib/json2.js"></script>  <script src="asset/lib/jquery-1.11.3.min.js"></script>  <script src="asset/lib/bootstrap-2.3.2/js/bootstrap.min.js"></script>  <script src="asset/lib/spin-2.1.0/jquery.spin.merge.js"></script>  <script src="asset/lib/lhgdialog-4.2.0/lhgdialog.js?skin=bootstrap2"></script>  <script src="asset/lib/dataTables-1.10.7/media/js/jquery.dataTables.js"></script> <script src="asset/lib/dataTables-1.10.7/plugins/integration/bootstrap/2/dataTables.bootstrap.js"></script>  <script src="asset/js/constant.js"></script> <script src="asset/js/user-manage.js"></script> </body> </html>

constant.js

/*常量*/ var CONSTANT = {DATA_TABLES: {DEFAULT_OPTION: { //DataTables初始化選項(xiàng)language: {"sProcessing": "處理中...","sLengthMenu": "每頁 _MENU_ 項(xiàng)","sZeroRecords": "沒有匹配結(jié)果","sInfo": "當(dāng)前顯示第 _START_ 至 _END_ 項(xiàng)，共 _TOTAL_ 項(xiàng)。","sInfoEmpty": "當(dāng)前顯示第 0 至 0 項(xiàng)，共 0 項(xiàng)","sInfoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過濾)","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中數(shù)據(jù)為空","sLoadingRecords": "載入中...","sInfoThousands": ",","oPaginate": {"sFirst": "首頁","sPrevious": "上頁","sNext": "下頁","sLast": "末頁","sJump": "跳轉(zhuǎn)"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}},autoWidth: false, //禁用自動調(diào)整列寬stripeClasses: ["odd", "even"],//為奇偶行加上樣式，兼容不支持CSS偽類的場合order: [], //取消默認(rèn)排序查詢,否則復(fù)選框一列會出現(xiàn)小箭頭processing: false, //隱藏加載提示,自行處理serverSide: true, //啟用服務(wù)器端分頁searching: false //禁用原生搜索},COLUMN: {CHECKBOX: { //復(fù)選框單元格className: "td-checkbox",orderable: false,width: "30px",data: null,render: function (data, type, row, meta) {return '<input type="checkbox" class="iCheck">';}}},RENDER: { //常用render可以抽取出來，如日期時間、頭像等ELLIPSIS: function (data, type, row, meta) {data = data || "";return '<span title="' + data + '">' + data + '</span>';}}} };

userManage.js

$(function () {var $wrapper = $('#div-table-container');var $table = $('#table-user');var _table = $table.dataTable($.extend(true, {}, CONSTANT.DATA_TABLES.DEFAULT_OPTION, {ajax: function (data, callback, settings) {//ajax配置為function,手動調(diào)用異步查詢//手動控制遮罩$wrapper.spinModal();//封裝請求參數(shù)var param = userManage.getQueryCondition(data);$.ajax({type: "GET",url: "datasource.php",cache: false, //禁用緩存data: param, //傳入已封裝的參數(shù)dataType: "json",success: function (result) {//setTimeout僅為測試遮罩效果setTimeout(function () {//異常判斷與處理if (result.errorCode) {$.dialog.alert("查詢失敗。錯誤碼：" + result.errorCode);return;}//封裝返回?cái)?shù)據(jù)，這里僅演示了修改屬性名var returnData = {};returnData.draw = data.draw;//這里直接自行返回了draw計(jì)數(shù)器,應(yīng)該由后臺返回returnData.recordsTotal = result.total;returnData.recordsFiltered = result.total;//后臺不實(shí)現(xiàn)過濾功能，每次查詢均視作全部結(jié)果returnData.data = result.pageData;//關(guān)閉遮罩$wrapper.spinModal(false);//調(diào)用DataTables提供的callback方法，代表數(shù)據(jù)已封裝完成并傳回DataTables進(jìn)行渲染//此時的數(shù)據(jù)需確保正確無誤，異常判斷應(yīng)在執(zhí)行此回調(diào)前自行處理完畢callback(returnData);}, 200);},error: function (XMLHttpRequest, textStatus, errorThrown) {$.dialog.alert("查詢失敗");$wrapper.spinModal(false);}});},columns: [CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,{className: "ellipsis", //文字過長時用省略號顯示，CSS實(shí)現(xiàn)data: "name",render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,//會顯示省略號的列，需要用title屬性實(shí)現(xiàn)劃過時顯示全部文本的效果},{className: "ellipsis",data: "position",render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,//固定列寬，但至少留下一個活動列不要固定寬度，讓表格自行調(diào)整。不要將所有列都指定列寬，否則頁面伸縮時所有列都會隨之按比例伸縮。//切記設(shè)置table樣式為table-layout:fixed; 否則列寬不會強(qiáng)制為指定寬度，也不會出現(xiàn)省略號。width: "80px"},{data: "status",width: "80px",render: function (data, type, row, meta) {return '<i class="fa fa-male"></i> ' + (data ? "在線" : "離線");}},{data: "start_date",width: "80px"},{className: "td-operation",data: null,defaultContent: "",orderable: false,width: "120px"}],"createdRow": function (row, data, index) {//行渲染回調(diào),在這里可以對該行dom元素進(jìn)行任何操作//給當(dāng)前行加樣式if (data.role) {$(row).addClass("info");}//給當(dāng)前行某列加樣式$('td', row).eq(3).addClass(data.status ? "text-success" : "text-error");//不使用render，改用jquery文檔操作呈現(xiàn)單元格var $btnEdit = $('<button type="button" class="btn btn-small btn-primary btn-edit">修改</button>');var $btnDel = $('<button type="button" class="btn btn-small btn-danger btn-del">刪除</button>');$('td', row).eq(5).append($btnEdit).append($btnDel);},"drawCallback": function (settings) {//渲染完畢后的回調(diào)//清空全選狀態(tài)$(":checkbox[name='cb-check-all']", $wrapper).prop('checked', false);//默認(rèn)選中第一行$("tbody tr", $table).eq(0).click();}})).api();//此處需調(diào)用api()方法,否則返回的是JQuery對象而不是DataTables的API對象$("#btn-add").click(function () {userManage.addItemInit();});$("#btn-del").click(function () {var arrItemId = [];$("tbody :checkbox:checked", $table).each(function (i) {var item = _table.row($(this).closest('tr')).data();arrItemId.push(item);});userManage.deleteItem(arrItemId);});$("#btn-simple-search").click(function () {userManage.fuzzySearch = true;//reload效果與draw(true)或者draw()類似,draw(false)則可在獲取新數(shù)據(jù)的同時停留在當(dāng)前頁碼,可自行試驗(yàn) // _table.ajax.reload(); // _table.draw(false);_table.draw();});$("#btn-advanced-search").click(function () {userManage.fuzzySearch = false;_table.draw();});$("#btn-save-add").click(function () {userManage.addItemSubmit();});$("#btn-save-edit").click(function () {userManage.editItemSubmit();});//行點(diǎn)擊事件$("tbody", $table).on("click", "tr", function (event) {$(this).addClass("active").siblings().removeClass("active");//獲取該行對應(yīng)的數(shù)據(jù)var item = _table.row($(this).closest('tr')).data();userManage.currentItem = item;userManage.showItemDetail(item);});$table.on("change", ":checkbox", function () {if ($(this).is("[name='cb-check-all']")) {//全選$(":checkbox", $table).prop("checked", $(this).prop("checked"));} else {//一般復(fù)選var checkbox = $("tbody :checkbox", $table);$(":checkbox[name='cb-check-all']", $table).prop('checked', checkbox.length == checkbox.filter(':checked').length);}}).on("click", ".td-checkbox", function (event) {//點(diǎn)擊單元格即點(diǎn)擊復(fù)選框!$(event.target).is(":checkbox") && $(":checkbox", this).trigger("click");}).on("click", ".btn-edit", function () {//點(diǎn)擊編輯按鈕var item = _table.row($(this).closest('tr')).data();$(this).closest('tr').addClass("active").siblings().removeClass("active");userManage.currentItem = item;userManage.editItemInit(item);}).on("click", ".btn-del", function () {//點(diǎn)擊刪除按鈕var item = _table.row($(this).closest('tr')).data();$(this).closest('tr').addClass("active").siblings().removeClass("active");userManage.deleteItem([item]);});$("#toggle-advanced-search").click(function () {$("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");$("#div-advanced-search").slideToggle("fast");});$("#btn-info-content-collapse").click(function () {$("i", this).toggleClass("fa-minus fa-plus");$("span", this).toggle();$("#user-view .info-content").slideToggle("fast");});$("#btn-view-edit").click(function () {userManage.editItemInit(userManage.currentItem);});$(".btn-cancel").click(function () {userManage.showItemDetail(userManage.currentItem);}); });var userManage = {currentItem: null,fuzzySearch: true,getQueryCondition: function (data) {var param = {};//組裝排序參數(shù)if (data.order && data.order.length && data.order[0]) {switch (data.order[0].column) {case 1:param.orderColumn = "name";break;case 2:param.orderColumn = "position";break;case 3:param.orderColumn = "status";break;case 4:param.orderColumn = "start_date";break;default:param.orderColumn = "name";break;}param.orderDir = data.order[0].dir;}//組裝查詢參數(shù)param.fuzzySearch = userManage.fuzzySearch;if (userManage.fuzzySearch) {param.fuzzy = $("#fuzzy-search").val();} else {param.name = $("#name-search").val();param.position = $("#position-search").val();param.office = $("#office-search").val();param.extn = $("#extn-search").val();param.status = $("#status-search").val();param.role = $("#role-search").val();}//組裝分頁參數(shù)param.startIndex = data.start;param.pageSize = data.length;param.draw = data.draw;return param;},showItemDetail: function (item) {$("#user-view").show().siblings(".info-block").hide();if (!item) {$("#user-view .prop-value").text("");return;}$("#name-view").text(item.name);$("#position-view").text(item.position);$("#salary-view").text(item.salary);$("#start-date-view").text(item.start_date);$("#office-view").text(item.office);$("#extn-view").text(item.extn);$("#role-view").text(item.role ? "管理員" : "操作員");$("#status-view").text(item.status ? "在線" : "離線");},addItemInit: function () {$("#form-add")[0].reset();$("#user-add").show().siblings(".info-block").hide();},editItemInit: function (item) {if (!item) {return;}$("#form-edit")[0].reset();$("#title-edit").text(item.name);$("#name-edit").val(item.name);$("#position-edit").val(item.position);$("#salary-edit").val(item.salary);$("#start-date-edit").val(item.start_date);$("#office-edit").val(item.office);$("#extn-edit").val(item.extn);$("#role-edit").val(item.role);$("#user-edit").show().siblings(".info-block").hide();},addItemSubmit: function () {$.dialog.tips('保存當(dāng)前添加用戶');},editItemSubmit: function () {$.dialog.tips('保存當(dāng)前編輯用戶');},deleteItem: function (selectedItems) {var message;if (selectedItems && selectedItems.length) {if (selectedItems.length == 1) {message = "確定要刪除 '" + selectedItems[0].name + "' 嗎?";} else {message = "確定要刪除選中的" + selectedItems.length + "項(xiàng)記錄嗎?";}$.dialog.confirmDanger(message, function () {$.dialog.tips('執(zhí)行刪除操作');});} else {$.dialog.tips('請先選中要操作的行');}} };

轉(zhuǎn)載于:https://my.oschina.net/xjt2014/blog/758126

總結(jié)

以上是生活随笔為你收集整理的Jquery DataTable服务端分页的最佳实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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