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

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

该插件一般是通过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": '',
                     "mRender": function (data, type, full) {
                     var html2 = '';
                         return html2;
                     },
                 }
                ],
select: {
style: 'multi'
}
});

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

id
表名
项目名称
查询条件
开放查询字段
开放填报字段
备注
创建日期











id
表名
项目名称
查询条件
开放查询字段
开放填报字段
备注
创建日期