datatables表格分頁和匯出的例子
阿新 • • 發佈：2019-02-02
datatables
datatables 外掛官網下載，地址：http://www.datatables.club/ 例子圖片：1. html
2.js datatables的初始化（qualityuser_Table.js）<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title>QualityUser</title> <link href="thirdparty/dataTables/media/css/jquery.dataTables.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="css/qualityuser.css" /> </head> <body> <div class="content rdk_main"> <div class="table_box"> <div id="qualityTable" class="table_content"> <table id="respondTable" class="table display table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>所屬地市</th> <th>總使用者數</th> <th>播放使用者數</th> <th>質差使用者數</th> <th>質差率</th> </tr> </thead> </table> </div> </div> </div> </div> </body> </html> <!--------------------------------第三方外掛------------------------------------> <script src="thirdparty/jquery.min.js" type="text/javascript"></script> <script src="thirdparty/dataTables/media/js/jquery.dataTables.js"></script> <script src="thirdparty/dataTables/extensions/Buttons/js/dataTables.buttons.js" type="text/javascript"></script> <script src="thirdparty/dataTables/extensions/Buttons/js/buttons.html5.js" type="text/javascript"></script> <!-----------------------------使用者js檔案--------------------------------> <script src="js/qualityuser/qualityuser_Table.js"></script>
//主函式入口 $(function(){ switchDisplayTable(); }); var $respondTable = $('#respondTable'); var $respondDetailTable=$('#respondDetailTable'); var qualityTable = { qualityTable:null, qualityTableTotal: 0, qualityTableFiltered: 0, options: { language: { "sProcessing": "處理中...", "sLengthMenu": "每頁 _MENU_ 項", "sZeroRecords": "", "sInfo": "共 _TOTAL_ 項結果", "sInfoEmpty": "", "sInfoFiltered": "", "sInfoPostFix": "", "sSearch": "搜尋:", "sUrl": "", "sEmptyTable": "表中資料為空", "sLoadingRecords": "載入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首頁", "sPrevious": "上一頁", "sNext": "下一頁", "sLast": "末頁", "sJump": "跳轉" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, "bPaginate": true,//是否分頁 "bRetrieve": true, "bFilter": false, // 搜尋欄 過濾功能 "searching": true, "iDisplayLength": 5,//每頁的行數 "bLengthChange": false, "bDestroy": true, "bAutoWidth": false, // 自動寬度 "stripeClasses": ["odd", "even"], "sDom": '<"top clearfix"B>rt<"bottom clearfix"ip>', "serverSide": false,//是否開啟伺服器模式，即後端分頁，資料來源（包括處理分頁，排序，過濾） "ordering": true,//是否關閉排序功能 "order": [[ 3, "desc" ]],//預設排序，以第4列降序排序 "bSort":false, "columnDefs": [{ "render": function (data, type, row, rowcol) { return (data == 'null') ? "--" : data; }, "targets":"_all" }], "columnDefs": [ { "orderable": false, "targets": 0 }, { "orderable": false, "targets": 1 } ],//配置第一列和第二列不允許排序 // "columnDefs": [{ "visible": false, "targets": 0 }]//設定第一列隱藏 } }; function getTableConfig(tableName) { var config = {}; config.total = onsiteTable[tableName+"Total"]; config.filtered=onsiteTable[tableName+"Filtered"]; config.table = tableName; return config; } function ajaxTable1(data, callback, settings, table) { //ajax配置為function,手動呼叫非同步查詢 lenth=data.length; draw=data.draw; page=(data.start / data.length); console.log("lenth="+lenth); console.log("draw="+draw); console.log("page="+page); var returnData = {}; returnData.draw = 3;//這裡直接自行返回了draw計數器,應該由後臺返回(需後端返回) returnData.recordsTotal = 40;//即沒有過濾的記錄數（資料庫裡總共記錄數）(需後端返回) qualityTable["qualityTableTotal"] = 40; returnData.recordsFiltered = 40;//過濾後的記錄數（如果有接收到前臺的過濾條件，則返回的是過濾後的記錄數，即不加limit條件的資料總條數）（需後端返回） qualityTable["qualityTableFiltered"] = 40; returnData.page=2; returnData.data = [ [ "Yuri Berry", "Chief Marketing Officer (CMO)", "1", "6154", "2009/06/25" ], [ "Caesar Vance", "Pre-Sales Support", "2", "8330", "2011/12/12" ], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "3", "6154", "2009/06/25" ], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "4", "6154", "2009/06/25" ], [ "Caesar Vance", "Pre-Sales Support", "5", "8330", "2011/12/12" ], [ "Caesar Vance", "Pre-Sales Support", "6", "8330", "2011/12/12" ], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "7", "6154", "2009/06/25" ], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "8", "6154", "2009/06/25" ], [ "Caesar Vance", "Pre-Sales Support", "9", "8330", "2011/12/12" ], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "10", "6154", "2009/06/25" ] ]; //呼叫DataTables提供的callback方法，代表資料已封裝完成並傳回DataTables進行渲染 //此時的資料需確保正確無誤，異常判斷應在執行此回撥前自行處理完畢 callback(returnData); } qualityTable.createAndRefreshRespondTable = function () { if (!qualityTable.respondTable) { qualityTable.respondTable = $respondTable.dataTable($.extend(true, {}, qualityTable.options, { "ajax": function (data, callback, settings) { ajaxTable1(data, callback, settings, $respondTable); }, buttons: [ { extend: 'csvHtml5',//定義一個按鈕是基於什麼樣的功能 text: '匯出', title:"質差使用者天周月統計", charset:'utf-8', bom:true, exportOptions: { modifier: { selected: true } } } ], })).api(); //此處需呼叫api()方法,否則返回的是JQuery物件而不是DataTables的API物件; } else { qualityTable.respondTable.ajax.reload(); } } function switchDisplayTable(){ qualityTable.createAndRefreshRespondTable(); }
3.表格的樣式檔案（qualityuser.css）
/* css reset*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, input, p, th, td, tbody, table { padding: 0; margin: 0; border: 0; border-color: transparent; -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; font-family: "Microsoft YaHei"; } html, body { width: 100%; height: 100%; font-family: "Microsoft YaHei"; } body{ position:relative } /*表格css樣式區域開始*/ #qualityTable { padding-top: 8px; } .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td { border: none; text-align: center; } .table-bordered>thead>tr>td, .table-bordered>thead>tr>th { border-bottom: 1px solid #cccccc; background-color: #EEEEEE; color: #008FD4; } table.dataTable.no-footer { border-bottom-color: rgb(221, 221, 221); } .dataTables_wrapper .dataTables_info { color: #5b5b5b; position: absolute; padding-top: 18px; height: 40px; right: 500px; } .dataTables_wrapper.no-footer .dataTables_scrollBody{ border-bottom: 1px solid #ddd; } .table_content table.table td{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .table_content table.table td:hover{ white-space: normal; word-break:break-word; } #respondDetailTable{ table-layout: fixed; } /*翻頁控制元件樣式開始*/ .dataTables_wrapper .dataTables_paginate { padding-top: 12px; font-size: 12px; margin-right: 195px; } .dataTables_paginate .paginate_input { width: 48px; height: 32px; display: inline-block; border: 1px solid #3daadf; border-radius: 5px; text-align: center; } .dataTables_paginate .paginate_jump, .dataTables_wrapper .dataTables_paginate .paginate_button { color: #008fd3 !important; cursor: pointer; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: none; border: 1px solid #FFF; color: #008FD3 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:active { background: none; border: 1px solid #FFF; color: #008FD3 !important; box-shadow: none; } .dataTables_paginate.paging_jump_input { padding-bottom: 10px; } /*----翻頁控制元件樣式結束-----*/ /*表格匯出按鈕樣式*/ .column_filter{ padding-left: 5px; } div.dt-buttons { float: right; } div.dt-buttons a { z-index: 1000; display: inline-block; border: 0px; padding: 0px 0px 0px 38px; width: 80px; height: 30px; line-height: 30px; background: #008fd5; border-radius: 5px; color: #FFF; margin:0 12px 12px 0px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; outline: none; } #qualityTable .bottom{ height:50px; } /*表格css樣式區域結束*/
4.其它的初始化例子：（ActiveCareSever_table.js）
var $qualityTable = $('#qualityTable');
var $satisfactionTable = $('#satisfactionTable');
var $complaintTable = $('#complaintTable');
var activeCareServerTable = {
qualityTable: null,
qualityTableTotal: 0,
qualityTableFiltered: 0,
satisfactionTable: null,
satisfactionTableTotal: 0,
satisfactionTableFiltered: 0,
complaintTable: null,
complaintTableTotal: 0,
complaintTableFiltered: 0,
options: {
language: {
"sProcessing": "處理中...",
"sLengthMenu": "每頁 _MENU_ 項",
"sZeroRecords": "",
"sInfo": "共 _TOTAL_ 項結果",
"sInfoEmpty": "",
"sInfoFiltered": "",
"sInfoPostFix": "",
"sSearch": "搜尋:",
"sUrl": "",
"sEmptyTable": "表中資料為空",
"sLoadingRecords": "載入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "末頁",
"sJump": "跳轉"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"bPaginate": true,
"bFilter": false, // 搜尋欄 過濾功能
"searching": false,
"iDisplayLength": 10,
"bLengthChange": false,
"bDestroy": true,
"bAutoWidth": false, // 自動寬度
"stripeClasses": ["odd", "even"],
"pagingType": "jump_input",
"sDom": '<"top">Zrt<"bottom"ip><"clear">',
"serverSide": true,
"ordering": false,
"columnDefs": [ {
"render": function (data, type, row, rowcol) {
return (data == 'null') ? "--" : data;
},
"targets":"_all"
}]
}
};
?
function calcPages(oSettings) {
return Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength);
}
/*
?*查詢、重新整理時，趨勢圖、餅圖聯動將table的總記錄數置為0（分頁不置零，提高查詢效率）
?*/
activeCareServerTable.totalToZero = function () {
activeCareServerTable.qualityTableTotal = 0;
activeCareServerTable.qualityTableFiltered = 0;
activeCareServerTable.satisfactionTableTotal = 0;
activeCareServerTable.satisfactionTableFiltered = 0;
activeCareServerTable.complaintTableTotal = 0;
activeCareServerTable.complaintTableFiltered = 0;
?
}
?
function getTableConfig(mark) {
var config = {};
if (mark == 1) {
config.total = activeCareServerTable.qualityTableTotal;
config.filtered = activeCareServerTable.qualityTableFiltered;
config.table = "qualityTable";
} else if (mark == 2) {
config.total = activeCareServerTable.satisfactionTableTotal;
config.filtered = activeCareServerTable.satisfactionTableFiltered;
config.table = "satisfactionTable";
} else if (mark == 3) {
config.total = activeCareServerTable.complaintTableTotal;
config.filtered = activeCareServerTable.complaintTableFiltered;
config.table = "complaintTable";
}
return config;
}
?
function ajaxTable(data, callback, settings, table, mark) { //ajax配置為function,手動呼叫非同步查詢
var config = getTableConfig(mark);
//手動控制遮罩
/*table.spinModal();*/
//封裝請求引數
var para = [
{
"name": "provincecode",
"value": condition.provincecode
}, //待定
{
"name": "citycode",
"value": condition.citycode
}, //待定
{
"name": "districtcode",
"value": condition.districtcode
}, //待定
{
"name": "timeUnit",
"value": condition.timeUnit
}, //待定
{
"name": "time",
"value": condition.time
}, //待定
{
"name": "page",
"value": (data.start / data.length)
},
{
"name": "length",
"value": data.length
},
{
"name": "draw",
"value": data.draw
},
{
"name": "total",
"value": config.total
},
{
"name": "filtered",
"value": config.filtered
},
{
"name": "server",
"value": condition.server
},
{
"name": "flag",
"value": condition.flag
}
];
$.ajax({
type: "GET",
url: rdkUrl("ActiveCareSeverNewTable.js", "homePage"),
cache: false, //禁用快取
data: rdkData(para), //傳入已封裝的引數
contentType: "application/json",
async: true,
success: function (result) {
//異常判斷與處理
if ((result.result).indexOf('service error') >= 0) {
//alert("查詢失敗。錯誤碼：" + result.result);
table.spinModal(false);
$("#ActiveCareServer_table_title span").html("載入中...");
return;
}
var parseData = eval(result.result)[0];
$("#ActiveCareServer_table_title span").html("詳單（" + parseData.recordsTotal + "單）");
var returnData = {};
returnData.draw = parseData.draw; //這裡直接自行返回了draw計數器,應該由後臺返回
returnData.recordsTotal = parseData.recordsTotal;
activeCareServerTable[config.table + "Total"] = parseData.recordsTotal;
returnData.recordsFiltered = parseData.recordsFiltered; //後臺不實現過濾功能，每次查詢均視作全部結果
activeCareServerTable[config.table + "Filtered"] = parseData.recordsFiltered;
returnData.data = parseData.data;
//關閉遮罩
table.spinModal(false);
//呼叫DataTables提供的callback方法，代表資料已封裝完成並傳回DataTables進行渲染
//此時的資料需確保正確無誤，異常判斷應在執行此回撥前自行處理完畢
callback(returnData);
?
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//$.dialog.alert("查詢失敗");
table.spinModal(false);
}
});
}
activeCareServerTable.createAndRefreshQualityTable = function () {
if (!activeCareServerTable.qualityTable) {
activeCareServerTable.qualityTable = $qualityTable.dataTable($.extend(true, {}, activeCareServerTable.options, {
"bAutoWidth": false,
"ajax": function (data, callback, settings) {
ajaxTable(data, callback, settings, $qualityTable, 1);
},
"columnDefs": [
{
"render": function (data, type, row, rowcol) {
return (data == 'null') ? "--" : '<span title="' +data+ '">' + data + '</span>';
},
"targets": [0,1,2,3,4,5,6,7,8]
},
{ "width": "10.8%", "targets": [2,3,4,5,6,8]},
{ "width": "16.2%", "targets": [7]},
{ "width": "9.5%", "targets": [1,0]}
]
})).api(); //此處需呼叫api()方法,否則返回的是JQuery物件而不是DataTables的API物件;
} else {
activeCareServerTable.qualityTable.ajax.reload();
}
}
activeCareServerTable.createAndRefreshSatisfactionTable = function () {
if (!activeCareServerTable.satisfactionTable) {
activeCareServerTable.satisfactionTable = $satisfactionTable.dataTable($.extend(true, {}, activeCareServerTable.options, {
"ajax": function (data, callback, settings) {
ajaxTable(data, callback, settings, $satisfactionTable, 2);
},
"columnDefs": [
{
"render": function (data, type, row, rowcol) {
return (data == 'null') ? "--" : '<span title="' +data+ '">' + data + '</span>';
},
"targets": [0,1,2,3,4,5,6,7,8]
},
{ "width": "10.8%", "targets": [2,3,4,5,6,8]},
{ "width": "16.2%", "targets": [7]},
{ "width": "9.5%", "targets": [1,0]}
]
})).api(); //此處需呼叫api()方法,否則返回的是JQuery物件而不是DataTables的API物件;
} else {
activeCareServerTable.satisfactionTable.ajax.reload();
}
}
activeCareServerTable.createAndRefreshComplaintTable = function () {
if (!activeCareServerTable.complaintTable) {
activeCareServerTable.complaintTable = $complaintTable.dataTable($.extend(true, {}, activeCareServerTable.options, {
"bAutoWidth": false,
"ajax": function (data, callback, settings) {
ajaxTable(data, callback, settings, $complaintTable, 3);
},
"columnDefs": [
{
"render": function (data, type, row, rowcol) {
return (data == 'null') ? "--" : '<span title="' +data+ '">' + data + '</span>';
},
"targets": [0,1,2,3,4,5,6]
},
{ "width": "14%", "targets": [2,3,4,6]},
{ "width": "24%", "targets": [5]},
{ "width": "10%", "targets": [0,1]}
]
})).api(); //此處需呼叫api()方法,否則返回的是JQuery物件而不是DataTables的API物件;
} else {
activeCareServerTable.complaintTable.ajax.reload();
}
}
activeCareServerTable.manipulateTable = function (tableNum, isSatisfactionDiv) {
var flag = isSatisfactionDiv || false;
if (tableNum == 1) {
activeCareServerTable.totalToZero();
activeCareServerTable.createAndRefreshQualityTable();?
} else if (tableNum == 2) {
if (flag) {
$("#complaintDiv").hide();
$("#satisfactionDiv").show();
activeCareServerTable.totalToZero();
activeCareServerTable.createAndRefreshSatisfactionTable();
} else {
$("#satisfactionDiv").hide();
$("#complaintDiv").show();
activeCareServerTable.totalToZero();
activeCareServerTable.createAndRefreshComplaintTable();
}
}
}
?/*選擇方塊切換表格上方下拉框內容及觸發表頭變動*/
function switchDisplayTable(tableNum) {
/*客戶應答成功率移動使用者、客戶應答成功率寬頻使用者、感知良好率移動使用者、
感知良好率寬頻使用者、外呼服務投訴率傳參分別是condition.server="1"-"5"*/
/*將選擇框都取消*/
condition.flag='0';
$("#selectpick_sel_1").parent().remove();
$("#selectpick_sel_2").parent().remove();
/*如果選擇第一個方塊*/
if (tableNum == "1") {
condition.server = "1";
$(".ActiveCareServer_table_content").hide();
$("#qualityTableDiv").show();
$(".sel_2").show();
$("#sel_1").html('<option value="1">移動使用者</option><option value="2">寬頻使用者</option>');
$("#sel_2").html('<option value="1">全部</option><option value="2">呼叫成功</option>');
$("#sel_1").selectpick({
container: '.sel_1',
onSelect: function (value, text) {
condition.flag='0';
$("#selectpick_sel_2").parent().remove();
$("#sel_2").html('<option value="1">全部</option><option value="2">呼叫成功</option>');
$(".sel_2").show();
condition.server = value; ???
activeCareServerTable.manipulateTable(1);
$("#sel_2").selectpick({
container: '.sel_2',
onSelect: function (value, text) {
/*當切換第二個下拉框時，將第二個下拉框修改為所選擇的值*/
var checkcondition = value=="1" ? "0": "1";
condition.flag= checkcondition; ??
activeCareServerTable.manipulateTable(1);
},
width:120
}); ???
},
width:120
});?
/*生成第二個下拉框*/
$("#sel_2").selectpick({
container: '.sel_2',
onSelect: function (value, text) {
/*當切換第二個下拉框時，將第二個下拉框修改為所選擇的值*/
var checkcondition = value=="1" ? "0": "1";
condition.flag= checkcondition; ??
activeCareServerTable.manipulateTable(1); ??
},
width:120
});?
activeCareServerTable.manipulateTable(1); ???
} else if (tableNum == "2") {
condition.server = "3";
condition.flag=" ";
$(".ActiveCareServer_table_content").hide();
$("#perceptionTableDiv").show();
$("#satisfactionDiv").show();
$("#complaintDiv").hide();
$(".sel_2").show();
$("#sel_1").html('<option value="1">感知良好率</option><option value="2">投訴率</option>');
$("#sel_2").html('<option value="1">移動使用者</option><option value="2">寬頻使用者</option>');
$("#sel_1").selectpick({
container: '.sel_1',
onSelect: function (value, text) {
/*當切換第一個下拉框時，修改為所選擇的值，並將第二個下拉框恢復為預設值：全部即"0"*/
$("#selectpick_sel_2").parent().remove();
$("#sel_2").html('<option value="1">移動使用者</option><option value="2">寬頻使用者</option>');
if(value=="1"){
$(".sel_2").show();
$("#satisfactionDiv").show();
$("#complaintDiv").hide();
condition.server="3";
activeCareServerTable.manipulateTable(2,true);
}else if(value=="2"){
$(".sel_2").hide();
$("#satisfactionDiv").hide();
$("#complaintDiv").show();
condition.server="5";
activeCareServerTable.manipulateTable(2);
} ?
$("#sel_2").selectpick({
container: '.sel_2',
onSelect: function (value, text) {
/*當切換第二個下拉框時，將第二個下拉框修改為所選擇的值*/
condition.server = String(2+parseInt(value)); ??
activeCareServerTable.manipulateTable(2,true);
},
width:120
});
},
width:120
});?
/*生成第二個下拉框*/
$("#sel_2").selectpick({
container: '.sel_2',
onSelect: function (value, text) {
/*當切換第二個下拉框時，將第二個下拉框修改為所選擇的值*/
condition.server = String(2+parseInt(value)); ??
activeCareServerTable.manipulateTable(2,true); ??
},
width:120
});??
activeCareServerTable.manipulateTable(2,true); ??
}
}