Datatables · TP5常用代碼

[TOC] ## 插件DataTables表格插件使用 ### （一）插件介紹 Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。參考手冊：http://www.datatables.club/reference/#options > 分頁，即時搜索和排序幾乎支持任何數據源：DOM， javascript， Ajax 和服務器處理支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation 各式各樣的擴展: Editor, TableTools, FixedColumns …… 豐富多樣的option和強大的API 支持國際化超過2900+個單元測試免費開源開始使用DataTables很簡單，只需要引入兩個文件，一個css樣式文件和DataTables本身的腳本文件。在DataTables CDN上，可以使用下面這兩個文件： CSS：http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css JS：http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js 怎樣簡單地使用DataTables？使用下方簡單的幾行代碼，一個方法初始化table ~~~ $(document).ready(function(){ $('#myTable').DataTable(); }); ~~~ ### （二）整合TP5使用 #### 1、html結構 ~~~ <div class="ibox-content"> <form method="post" class="form-horizontal" action="{:url('deleteAll')}" data-type="ajax"> <input type="hidden" name="catid" value="{$infoList[0]['catid']}" /> <div class="row"> <div class="col-sm-8 m-b-xs">  </div> </div> <div class="table-responsive"> <table id="dataTables-example" class="table table-striped"> <thead> <tr> <th>ID</th> <th>標題</th> </tr> </thead> </table> </div> </form> </div> ~~~ > 完整content.html ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H+ 后臺主題UI框架 - 樹形視圖</title> <meta name="keywords" content="H+后臺主題,后臺bootstrap框架,會員中心主題,后臺HTML,響應式后臺"> <meta name="description" content="H+是一個完全響應式，基于Bootstrap3最新版本開發的扁平化主題，她采用了主流的左右兩欄式布局，使用了Html5+CSS3等現代技術"> <link rel="shortcut icon" href="favicon.ico"> <link href="__ADMIN__/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="__ADMIN__/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="__ADMIN__/css/plugins/iCheck/custom.css" rel="stylesheet"> <link href="__ADMIN__/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"> <link href="__ADMIN__/css/animate.min.css" rel="stylesheet"> <link href="__ADMIN__/css/style.min862f.css?v=4.1.0" rel="stylesheet"> <link href="__ADMIN__/css/admin.css" rel="stylesheet"> </head> <body class="gray-bg"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>{$catname ? $catname : '暫無'}列表</h5> </div> <div class="ibox-content"> <form method="post" class="form-horizontal" action="{:url('deleteAll')}" data-type="ajax"> <input type="hidden" name="catid" value="{$infoList[0]['catid']}" /> <div class="table-responsive"> <table id="dataTables-example" class="table table-striped"> <thead> <tr> <th><input id="isCheckAll" type="checkbox" class="i-checks"></th> <th>ID</th> <th>標題</th> <th>發布人</th> <th>發布時間</th> <th>瀏覽量</th> <th>操作</th> </tr> </thead> </table> </div> </form> </div> </div> <script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script> <script src="__ADMIN__/js/bootstrap.min.js?v=3.3.6"></script> <script src="__ADMIN__/js/plugins/dataTables/jquery.dataTables.js"></script> <script src="__ADMIN__/js/plugins/dataTables/dataTables.bootstrap.js"></script> <script src="__ADMIN__/js/content.min.js?v=1.0.0"></script> <script src="__ADMIN__/js/plugins/iCheck/icheck.min.js"></script> <script> $(document).ready(function() { $("#dataTables-example").dataTable({ "serverSide": true, "ajax": { "url": "{:url('getDataTables',['id'=>input('id')])}", "data": function(d) { d.extra_search = "title|username"; } }, "ordering": false, //禁用全局排序 "order": [0, '`order` desc'], "lengthMenu": [5, 10, 20, 50, 100], // "dom": '<l <"#normalToos">f>t<ip>', "dom": "<'row'<'#normalToos.col-xs-4'><'col-xs-8'f>>" + "<'row'<'col-xs-12't>>" + "<'row'<'col-xs-6'li><'col-xs-6'p>>", "language": { "zeroRecords": "沒有檢索到數據", "lengthMenu": "每頁 _MENU_ 條記錄  ", "search": "搜索 ", "info": "共 _PAGES_ 頁，_TOTAL_ 條記錄，當前顯示 _START_ 到 _END_ 條", "paginate": { "previous": "上一頁", "next": "下一頁", } }, "columns": [{ render: function(data, type, row, meta) { return '<input type="checkbox" class="i-checks" name="ids[' + row.id + ']">'; } }, { data: "id" }, { data: "title" }, { data: "username" }, { data: "inputtime" }, { data: "views" }, { data: "operate" }, ], "drawCallback": function() { normal_init(); }, "initComplete": function() { $("#normalToos").append("<div class='m-b-xs'>" + "<div class='btn-group hidden-xs' id='exampleTableEventsToolbar' role='group'>" + "<button type='submit' class='btn btn-sm btn-outline btn-default' title='添加'>" + "<i class='glyphicon glyphicon-plus' aria-hidden='true'></i></button>" + "<button type='submit' class='btn btn-sm btn-outline btn-default' title='刪除'>" + "<i class='glyphicon glyphicon-trash' aria-hidden='true'></i></button></div></div>"); } }); }); </script> <script src="__ADMIN__/js/plugins/layer/layer.min.js"></script> <script src="__ADMIN__/js/layer_hplus.js"></script> </body> </html> ~~~ #### 2、js實現 ~~~ <script> $(document).ready(function() { $("#dataTables-example").dataTable({ "serverSide": true, "ajax": { "url": "{:url('getDataTables',['id'=>input('id')])}", "data": function(d) { d.extra_search = "title|username"; } }, "ordering": false, //禁用全局排序 "order": [0, '`order` desc'], "lengthMenu": [5, 10, 20, 50, 100], // "dom": '<l <"#normalToos">f>t<ip>', "dom": "<'row'<'#normalToos.col-xs-4'><'col-xs-8'f>>" + "<'row'<'col-xs-12't>>" + "<'row'<'col-xs-6'li><'col-xs-6'p>>", "language": { "zeroRecords": "沒有檢索到數據", "lengthMenu": "每頁 _MENU_ 條記錄  ", "search": "搜索 ", "info": "共 _PAGES_ 頁，_TOTAL_ 條記錄，當前顯示 _START_ 到 _END_ 條", "paginate": { "previous": "上一頁", "next": "下一頁", } }, "columns": [{ render: function(data, type, row, meta) { return '<input type="checkbox" class="i-checks" name="ids[' + row.id + ']">'; } }, { data: "id" }, { data: "title" }, { data: "username" }, { data: "inputtime" }, { data: "views" }, { data: "operate" }, ], "drawCallback": function() { normal_init(); }, "initComplete": function() { $("#normalToos").append("<div class='m-b-xs'>" + "<div class='btn-group hidden-xs' id='exampleTableEventsToolbar' role='group'>" + "<button type='submit' class='btn btn-sm btn-outline btn-default' title='添加'>" + "<i class='glyphicon glyphicon-plus' aria-hidden='true'></i></button>" + "<button type='submit' class='btn btn-sm btn-outline btn-default' title='刪除'>" + "<i class='glyphicon glyphicon-trash' aria-hidden='true'></i></button></div></div>"); } }); }); </script> ~~~ #### 3、php處理 ~~~ // datatables插件請求地址 public function getDataTables($id = 0) { // 請求數據 // draw:1 請求次數 // columns[0][data]:0 設置列的數據源，即如何從整個Table的數據源(object / array)中獲得 // columns[0][name]: 為列設定一個別名 // columns[0][searchable]:true 在該列上允許或者禁止過濾搜索記錄 // columns[0][orderable]:true 在該列上允許或者禁止排序功能 // columns[0][search][value]: 該列的搜索條件 // columns[0][search][regex]:false 允許或者禁止對在搜索字符串中出現的正則表達式字符強制編碼 // order[0][column]:0 指定排序的列 // order[0][dir]:asc 指定排序列的方式：升序或降序 // start:0 起始下標 // length:10 每頁記錄數 // search[value]: 全局搜索條件 // search[regex]:false 允許或者禁止對在搜索字符串中出現的正則表達式字符強制編碼 // 返回數據 // "draw": 請求次數 // "recordsTotal": 數據總數 // "recordsFiltered": 過濾之后的記錄總數 // "data": 返回數據 if($id){ //獲取請求過來的數據 $getParam = request()->param(); $draw = $getParam['draw']; //排序 $orderSql = $getParam['order'][0]['dir']; //自定義查詢參數 $extra_search = $getParam['extra_search']; // 獲取表名 $tablename = getModInfoById($id, 'tablename'); // 總記錄數 $recordsTotal = Db::name($tablename)->where('catid',$id)->count(); //過濾條件后的總記錄數 $search = $getParam['search']['value']; $recordsFiltered = strlen($search) ? Db::name($tablename)->where('catid',$id)->where($extra_search,'like','%'.$search.'%')->count() : $recordsTotal; //分頁 $start = $getParam['start']; //起始下標 $length = $getParam['length']; //每頁顯示記錄數 //根據開始下標計算出當前頁 $page = intval($start/$length) + 1; $config = ['page'=>$page, 'list_rows'=>$length]; $list = Db::name($tablename)->where('catid',$id)->where($extra_search,'like','%'.$search.'%')->order($orderSql)->paginate(null,false,$config); $lists = []; if(!empty($list)){ foreach ($list as $key => $value) { $lists[$key] = $value; $lists[$key]['operate'] = "<a href='". url('index',['id'=>$value['id']]) ."' title='編輯'><i class='fa fa-edit text-navy'></i></a>   <a name='delete' href='". url('delete',['id'=>$value['id'], 'catid'=>$value['catid']]) ."' title='刪除'><i class='fa fa-trash-o text-navy'></i></a>"; } } } else{ $draw = 1; $recordsTotal = 0; $recordsFiltered = 0; $lists = []; } $data = array( "draw"=>$draw, "recordsTotal"=>$recordsTotal, //數據總數 "recordsFiltered"=>$recordsFiltered, //過濾之后的記錄總數 "data"=>$lists ); echo json_encode($data); ~~~ ## （三）部分列靠左、居中顯示 ### 1、實現功能 > （1）表頭居中（2）部分td的text靠左排列，部分居中，部分靠右 ### 2、css樣式 ``` <style> .table th { text-align: center; } .align_left { text-align: left;display:block; } .align_right { text-align: right; } .align_center { text-align: center; } </style> ``` ### 3、渲染表格，部分代碼 ``` "columns": [{ render: function(data, type, row, meta) { return '<input type="checkbox" class="i-checks" name="ids[' + row.id + ']">'; } }, { data: "id" }, { //data: "title" "data": function (data) { return '<span class="align_left">'+data.title+'</span>'; } }, { data: "username" }, { data: "inputtime" }, { data: "views" }, { data: "operate" }, ], ``` ### 4、參考網址 >DataTables 如何實現部分列的text靠左、部分列的text居中？ https://ask.csdn.net/questions/681091?sort=votes_count ### 5、注意事項 span默認行內元素，設置text-align沒用，要設置為塊級元素才行 `.align_right,.align_center{display:block}` 或者span改為div