datatables表格分页和导出的例子
来源：互联网 发布：java包装一年工作经验 编辑：程序博客网 时间：2024/06/05 08:49
datatables
datatables 插件官网下载，地址：http://www.datatables.club/
例子图片：![]()
1. html
<!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>
2.js datatables的初始化（qualityuser_Table.js）
//主函数入口$(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); ?? }}
阅读全文
0 0
- datatables表格分页和导出的例子
- 使用vue和datatables进行表格的服务器端分页
- dataTables中的数据自带分页和查询以及自带导出excel表格
- Bootstrap风格的分页表格Datatables
- DataTables分页表格
- 插件介绍: DataTables 表格分页
- datatables数据表格的数据csv本地导出
- datatables的服务器分页
- jquery插件dataTables（dataTables在显示表格的时候，果然是个好东西,支持排序/搜索/分页/...）
- jQuery的表格插件datatables
- 强大的表格控件-Datatables
- Datatables--一个有意思的自动分页和排序的插件
- datatables表单分页，国外的
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
- [datatables -- 学习01]: 动态画出表格，并可以导出excel
- 报表的分页和导出
- Repeater 和分页的例子
- jsp页面里的分页表格导出Excel
- 在线与本地myeclipse安装svn
- 项目管理利器—maven（二）
- SharedPreferences中的commit和apply方法
- Oracle性能调整之--DML语句性能调整
- 前端小白--工具篇（一）雪碧图CssSprite
- datatables表格分页和导出的例子
- 如何快速转载CSDN中的博客
- Mac使用阿里云Code提供的Git仓库做版本控制
- ehcache的简单运用
- ListenableFuture
- Android Handler机制的简单理解
- Ubuntu 16.04安装测试MQTT Mosquitto
- linux cpufreq framework(4)_cpufreq governor
- Ext.form.ComboBox setValue()初始值设定问题
