datatables表格分页和导出的例子

最新推荐文章于 2024-04-30 18:00:55 发布

xiegongmiao

最新推荐文章于 2024-04-30 18:00:55 发布

阅读量4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiegongmiao/article/details/78800196

版权

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["qualityTableTot

最低0.47元/天解锁文章

xiegongmiao

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
datatables表格分页和导出的例子

datatables datatables 插件官网下载，地址：http://www.datatables.club/例子图片： 1. htmlQualityUser 所属地市总用户数播放用户数
复制链接

扫一扫