重构PHP通用查询系统之2——jquery datatable插件如何使用,如何让表头自适应等?

发布于2020-01-27 18:26:14  分类:php   阅读( 29 ) 

jquery datatable是一个非常强大的表格插件,使用时,首先要引入两个js:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

该插件一般是通过ajax从后台获取数据,然后在前台显示。因此,在使用前,必须要知道ajax方式返回的数据格式要怎样。作为PHP的后台读取数据库后,返回的格式是数组,jquery datatable支持该方式,只需直接转json就行的。关键在于:数据要放在数组的data中,后台代码如下:

    //Ajax获取Table全表数据
    public function Ajaxcksjb(){
    $bm = htmlspecialchars(stripslashes(str_replace(' ','',$_GET['bm'])));//表名
$is_login = $this->is_login();
    if($is_login == true){
$list = (new Table($bm))->fetchAll();
$num = count($list);
$data['data'] = $list;
$data['recordsTotal'] = $num;//数据库共多少条
echo json_encode($data,JSON_UNESCAPED_UNICODE);
    }else{
echo "请先登录!";
    }
    }

$data['data']的数据格式如下,recordsTotal是用于前台分页显示总数据:

[
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh",
        "extn":       "8422"
    }
]

前台展示时,用"data": "字段"的方式对应data数据:

  "aoColumns": [//返回的json数据,sClass默认值为空字符串
       { "sClass": "center" },
       { "data": "id", "sClass": "center" },
       { "data": "bm", "sClass": "center" },
       { "data": "xmmc", "sClass": "center" },
       { "data": "cxtj", "sClass": "center" },
       { "data": "kfcxzd", "sClass": "center" },
       { "data": "kftbzd", "sClass": "center" },
       { "data": "beizhu", "sClass": "center" },
       { "data": "cjrq", "sClass": "center" },
   ],

第一行中数据用于筛选,因此表格行首的选择框,因此不加入数据,仅设置居中格式。

接下来,讲一下在使用中遇到的一个问题,自适应时,在小屏幕中会显示一个滚动条,可以左右拖动显示。但出现的问题是,表头固定不动,导致无法对齐数据。解决办法是,不用Y轴自适应sScrollY,而使用X轴自适应sScrollX:

var myTable = $('#dynamic-table').DataTable({
                "bProcessing": true,//进度条
                //"sScrollY": "100%",//自适应
                "sScrollX": "100%",
                "bSort": false,//是否排序
                "bProcessing":false,//用户拖动滚动条的时候DataTable会不断加载数据
                "sAjaxSource":"/admin/bgsxAjax",//ajax请求json数据
                "method":"post",
                "oLanguage": {//中文翻译
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起,查询不到任何相关数据",
                    "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                    "sInfoEmtpy": "找不到相关数据",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",  
                    "sProcessing": "正在加载中...",
                    "sSearch": "搜索",
                    "sInfoEmpty": "显示 0 至 0 共 0 项",
"oPaginate":{ "sFirst": "第一页", "sPrevious":"上一页","sNext":"下一页","sLast":"末页 "}
                },
                "aoColumns": [//返回的json数据,sClass默认值为空字符串
                { "sClass": "center" },
                    { "data": "id", "sClass": "center" },
                    { "data": "bm", "sClass": "center" },
                    { "data": "xmmc", "sClass": "center" },
                    { "data": "cxtj", "sClass": "center" },
                    { "data": "kfcxzd", "sClass": "center" },
                    { "data": "kftbzd", "sClass": "center" },
                    { "data": "beizhu", "sClass": "center" },
{ "data": "cjrq", "sClass": "center" },
                ],
                "aoColumnDefs": [
                 {
                "aTargets": [0],//第0列为选择框
                     "mData": '<label class="pos-rel"><input type="checkbox" class="ace"/><span class="lbl"></span></label>',
                     "mRender": function (data, type, full) {
                     var html2 = '<label class="pos-rel"><input type="checkbox" class="ace"/><span class="lbl"></span></label>';
                         return html2;
                     },
                 }
                ],
select: {
style: 'multi'
}
});

这时,会出现表格列少时,无法铺满屏幕问题,解决办法,表外部套上一层DIV,再给TABLE加上100%宽度,详细代码:

<!-- 表格开始 -->
<div class="table-responsive">
<table id="dynamic-table" class="table table-striped table-bordered table-hover" width="100%">
<!-- 表头 -->
<thead>
<tr>
<th class="center" style="width: 60px;">
<label class="pos-rel">
<input type="checkbox" class="ace" />
<span class="lbl"></span>
</label>
</th>
<th style="width:6%;">id</th>
<th>表名</th>
<th>项目名称</th>
<th>查询条件</th>
<th>开放查询字段</th>
<th>开放填报字段</th>
<th>备注</th>
<th>创建日期</th>
</tr>
</thead>
<!-- 表内容 -->
<tbody id="bgnr">
<tr>
<td class="center">
<label class="pos-rel">
<input type="checkbox" class="ace" />
<span class="lbl"></span>
</label>
</td>
<td>id</td>
<td>表名</td>
<td>项目名称</td>
<td>查询条件</td>
<td>开放查询字段</td>
<td>开放填报字段</td>
<td>备注</td>
<td>创建日期</td>
</tr>
</tbody>
</table>
</div>
<!-- 表格结束 -->

效果如下图,可以发现表头也会自适应跟着移动了,不再出现错乱的问题:

表格的基本使用就这样了,分页暂时使用前台分页,后台数据库分页较为复杂,以后再研究。

最后更新于:2020-01-27 18:26:14


上一篇: 重构PHP通用查询系统之1——PHPExcel类在框架中如何调用?

下一篇: 重构PHP通用查询系统之3——jquery datatable表格如何双击修改?


  • 最新评论(共0条)
需要登录才能发表评论

加入组织

  • QQ
  • 1. 手Q扫左侧二维码

    2. 搜Q群:617719749

    3. 点击加入学习群

最新评论