本文摘要
·对于10,000元以下的外包项目，通常CRUD业务占据50%以上。每个项目虽然业务不同，但是对数据库中每个表的操作都是一定的。在做了n个项目之后，我觉得程序员不能无脑进行CRUD操作，这样我赚钱的效率太低了（哈哈）！
·本文将介绍一个在jquery.dataTable框架上二开的组件，帮助大家无脑开发。
作者：CSDN 征途黯然.
一、组件介绍
本dataTable组件是基于jquery.dataTable进行二开的，其官方网址是https://datatables.net/。
组件的最终效果如下图：
本组件支持的功能如下：
· 自定义表格样式
· 数据导出、打印、复制
· 隐藏列、显示列
· 选中（多）行数据
· 搜索表格内容
· 按表头排序
· 分页【这个是服务器端分页，即时请求】
二、组件使用说明
获取组件源代码，您可以关注公众号‘三黄工作室’回复‘dataTable’获取。项目的目录树如下图所示：
其中，zh.json存放国际化资源，主要用来做中文显示；images中的3张图片，用作表头排序时显示降序、升序；API.php与connect.php来模拟后端接口；其他都是组件需要用到的资源文件。
下载好源代码后，大家可以修改index.html里面的代码来测试不同的效果，最后移植到自己的项目中就可以了。
三、组件参数详解
index.html文件内容如下：
<html> <title>组件一 | 数据表格</title> <!-- dataTable基础样式 --> <link rel="stylesheet" href="plugs/dataTable/datatables.min.css"> <!-- 左上方按钮组样式 --> <link rel="stylesheet" href="plugs/dataTable/buttons.dataTables.min.css"> <!-- 选中行数据样式 --> <link rel="stylesheet" href="plugs/dataTable/select.dataTables.min.css"> <!-- jquery --> <script src="plugs/jquery/jquery-3.3.1.min.js" type="text/javascript"></script> <!-- dataTable.js --> <script src="plugs/dataTable/jquery.dataTables.min.js" type="text/javascript"></script> <!-- 按钮组点击事件、配置支持 --> <script src="plugs/dataTable/dataTables.buttons.min.js" type="text/javascript"></script> <!-- 导出、复制、打印支持 --> <script src="plugs/dataTable/jszip.min.js" type="text/javascript"></script> <script src="plugs/dataTable/buttons.html5.min.js" type="text/javascript"></script> <script src="plugs/dataTable/buttons.print.min.js" type="text/javascript"></script> <!-- 隐藏列支持 --> <script src="plugs/dataTable/buttons.colVis.min.js" type="text/javascript"></script> <!-- 选中行数据支持 --> <script src="plugs/dataTable/dataTables.select.min.js" type="text/javascript"></script> <body> <button id="loading">重新加载</button> <table id="Table" width="100%"></table> </body> <script> $(document).ready( function () { var table = $('#Table').DataTable({ /******配置表格数据源********/ ajax: { url: "API.php",// 数据接口，后台接收数据要满足dataTable的格式 dataSrc: 'data'// 规定数据源在后台数据的位置 }, /******配置插件按钮组********/ dom: 'Blfrtip',// 按钮组放置的位置在左侧 buttons: [ {extend:'copy',},// 复制 {extend:'excel',},// 导出excel {extend:'csv',},// 导出csv {extend:'print'},// 打印 { extend: 'colvis',// 隐藏、显示列 columns: ':not(.noVis)'// 设置有样式为.noVis的列，不在隐藏的范围内 } ], /******配置选择数据的样式********/ select: { style: 'os', selector: 'td:first-child'// 表示通过点击第一个cell来选中行 }, /******配置服务器模式********/ serverSide: true, /******配置表头********/ columns: [ { className: 'select-checkbox noVis', orderable: false, searchable: false, data: null, defaultContent: '', }, { data: 'id', title:'用户ID', searchable: true, // "visible": false, render: function ( data, type, row, meta ) { return '<a href="'+data+'">'+data+'</a>'; }, className: 'noVis' }, { data: "user_name", title:"账号", render: function ( data, type, row, meta ) { return type === 'display' && data.length > 5 ? '<span title="'+data+'">'+data.substr( 0, 38 )+'...</span>' : data; } }, { data: "true_name","title":"姓名" }, { data: "register_time","title":"注册时间" }, { data: "last_login_time","title":"最近登录" }, { data: "last_login_ip","title":"登录IP"}, { data: "user_desc","title":"用户描述" }, ], /******i18n -- 设置中文语言配置********/ language: { url:'plugs/dataTable/i18n/zh.json' }, /******设置各个组件是否显示********/ "bPaginate": true, //翻页组件是否开启 "sPaginationType": "full_numbers",// 首页、尾页按钮是否开启 "bLengthChange": true, //改变每页显示数据数量组件是否开启 "aLengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "所有"]],//每页显示数量的可选项与对应文字 "bFilter": true, //查询过滤组件是否开启 "bSort": true, //排序功能是否开启 "bInfo": true,//页脚信息是否显示 // "bStateSave": true,//状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。 "bProcessing" : true, }); /*** * 重新加载表格 * */ $('#loading').click( function () { table.draw( false ); }); /*** * 配置隐藏列功能 * */ $('.toggle-vis').on( 'click', function (e) { e.preventDefault(); var column = table.column( $(this).attr('data-column') ); column.visible( ! column.visible() ); } ); }); </script> </html>
【引入资源文件】----第3-22行，引入了必要的css、js资源，各自的作用详见注释；
【表格基本样式】----第26行，添加了一个table标签，必须有id值，需要设置width为100%，这是最基本配置，没有什么样式。在我们二开中，可以给table加上class，这样就支持各种漂亮的样式了。
【初始化】----第32-123行，初始化表格，里面加入了很多配置；
【配置表格数据源】----第33-37行，指定此表格数据来源的接口；url指定接口，dataSrc指定我们的表格数据在后台返回数据中的位置。例如：
/******配置表格数据源********/ ajax: { url: "API.php",// 数据接口，后台接收数据要满足dataTable的格式 dataSrc: 'data'// 规定数据源在后台数据的位置 },
对应的后台数据格式为：
{ "data" : [ {...}, {...}, ... ] }
【配置插件按钮组】----第38-49行，配置插件按钮，包括复制、导出、打印功能，注释介绍的很清楚，唯一值得注意的是，这样的写法看似很简单，其实都是调用的其他js文件里面exports出来的模块。
【配置选择数据的样式】----第50-54行，值得注意的是，selector属性规范了选择表格数据的行为，'td:first-child'规定了只能点击每一行的第一个格子才能选中此行，默认是点击一行的任何位置就可以选中。
【配置服务器模式】----第56行，非常重要，开启服务器来承载分页功能，开启之后，前端请求的数据格式如下：
而我们在后端必须把数据封装成一定的格式，如下：
不管我们后端是什么语言，都需要接收dataTable封装好的数据格式，包括如下（我的后端是PHP版本，主要看注释）：
// 起始索引 @$start=$_GET['start']; // 页面长度 @$length=$_GET['length']; // 搜索关键字 @$search=$_GET['search']['value']; // 表头属性 @$columns=$_GET['columns']; // 排序属性 @$order=$_GET['order'];
这里给出我封装好的PHP后端的例子，语言不重要，主要是理解一下就行：
<?php require('connect.php'); date_default_timezone_set("PRC"); //设置成亚洲时区 // 起始索引 @$start=$_GET['start']; // 页面长度 @$length=$_GET['length']; // 搜索关键字 @$search=$_GET['search']['value']; // 表头属性 @$columns=$_GET['columns']; // 排序属性 @$order=$_GET['order']; $result_json = []; /** * 拼接sql语句 */ $sql_all = "SELECT * from sy_users "; $sql = $sql_all; // 搜索关键字 $flag = true; foreach($columns as $c){ if($c['data'] == '') continue; if($search != '' && $c['searchable'] && $flag) { $sql.=" where ".$c['data']." like '%$search%' "; $flag = !$flag; }else if($search != '' && $c['searchable']){ $sql .= " or ".$c['data']." like '%$search%' "; } } // 排序 if(count($order)!=0 && $order[0]['column']!=0 ){ $sql.=" order by "; foreach($order as $o){ $sql .= $columns[ $o['column'] ]['data']." ".$o['dir']." "; } } // 分页 $sql_page =$sql." limit $start,$length"; /** * 设置返回数据 */ $result_mysqli=mysqli_query( $con, $sql_all ); while(@$obj = mysqli_fetch_object($result_mysqli)) $result_json[]=$obj; // 数据的总条数 $recordsTotal = count($result_json); $result_json = []; $result_mysqli=mysqli_query( $con, $sql ); while(@$obj = mysqli_fetch_object($result_mysqli)) $result_json[]=$obj; // 最终过滤后数据的总条数 $recordsFiltered = count($result_json); $result_json = []; $result_mysqli=mysqli_query( $con, $sql_page ); while(@$obj = mysqli_fetch_object($result_mysqli)) $result_json[]=$obj; $json = array( 'data'=> $result_json, 'recordsTotal' => $recordsTotal, 'recordsFiltered' => $recordsFiltered ); echo json_encode($json); ?>
【配置表头】----第58-90行，非常重要，配置表头的属性，data表示该列在返回的数据中的字段，title表示表头名称，orderable表示是否能排序，searchable表示是否参与检索，className为数据行设置class，render是一个回调函数，具体有2种常用用法，见上面的代码。 【设置中文语言配置】----第92-95行，显示中文版本，调用本地的json文件，不用管。
【设置各个组件是否显示】----第97-106行，注释很详细，可以自己测试看一下效果。
本组件的源代码
如果需要本组件的源代码，请扫描关注我的公众号，回复“dataTable”即可。
