服務器端分頁 · PHP筆記

``` <table id="table"></table> <script> /*bootstrap table*/ $('#table').bootstrapTable({ url:"/wadmin/permission/doRuleList",//請求數據url queryParams: function (params) {//傳遞參數 return { offset: params.offset, //頁碼 limit: params.limit, //頁面大小 search : params.search, //搜索 order : params.order, //排序 ordername : params.sort, //排序 }; }, showHeader : true, showColumns : true, showRefresh : true, pagination: true,//分頁 sidePagination : 'server',//服務器端分頁 pageNumber : 1, pageList: [5, 10, 20, 50],//分頁步進值 search: true,//顯示搜索框 //表格的列 columns: [ { field: 'id',//域值 title: '規則ID',//標題 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '5%', }, { field: 'name',//域值 title: '唯一英文標識',//標題 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '30%', editable:true, }, { field: 'title',//域值 title: '中文描述',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '35%', editable:true, }, { field: 'status',//域值 title: '狀態',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '20%', formatter : function (value, row, index) {//單元格格式函數,上下文（this）是列Object.(value: 字段值。 row: 行記錄數據。 index: 行索引。 field: 行字段。) if (row['status'] === 1) { return '正常'; } if (row['status'] === 0) { return '禁用'; } return value; } } ] }); </script> ``` TP5: controller ~~~php public function doRoleRuleList() { $id = input("id"); if (!$id) return ""; $limit = input("limit"); $offset = input("offset"); $search = input("search"); $order = input("order", "desc"); $ordername = input("ordername"); if (!$ordername) { $ordername = 'id'; $order = 'desc'; } $perModel = new PermissionModel(); $rs = $perModel->doRoleRuleList($id, $offset, $limit, $search, $order, $ordername); return json($rs); } ~~~ model ~~~php public function doRoleRuleList($id, $offset, $limit, $search, $order, $ordername) { $total = Db::connect("dbUser")->table("auth_rule")->where(['status'=>['<>', 0]])->count(); $auth_group = Db::connect("dbUser")->table("auth_group")->field("id,rules")->where("id", $id)->find(); $rules ="-1"; if ($auth_group && $auth_group['rules']) $rules = $auth_group['rules']; $rows = Db::connect("dbUser")->table("auth_rule") ->field(['id','name','title',"if(id in ({$rules}), 1, 0)"=>'selected']) ->where([ 'status'=>['<>', 0], // 'name|title' => ['like', "%{$search}%"] ]) ->order($ordername." ".$order) ->select(); return ['total'=>$total,'rows'=>$rows]; } ~~~ ## **復雜表格** 行內編輯（編輯文字，下拉選擇），樣式改變，自定義圖標，文件上傳等 **1.顯示詳情使用如下代碼：** 表格參數中添加代碼 ~~~ detailView : true, detailFormatter : function (index, row) { var image = '<div class="photos">' +'<a target="_blank" href="'+row['jumpUrl']+'"><img alt="image" class="feed-photo" src="'+row['picUrl']+'"></a>' +'</div>'; return image; } ~~~ 可以在detailFormatter進行代碼的格式化，以字符串的形式返回即可，實現效果如下： ![](https://img.kancloud.cn/3e/fd/3efdefd582a4a4798414ac2ea1199fb5_404x409.png) **2.表格列內容的格式化** 列參數中添加代碼 ~~~javascript formatter : function (value, row, index) { return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>" } ~~~ 效果如下： ![](https://img.kancloud.cn/6f/11/6f11e5958760ade1369bfaa4a896573d_534x133.png) **3 . 表格的樣式自定**義列參數中添加帶代碼 ~~~javascript cellStyle : function (value, row, index) { return { css: { "max-width": "300px", "word-wrap": "break-word", "word-break": "normal" } }; } ~~~ **4 . 新增數據** 在js文件中添加如下代碼： ~~~javascript $("#btn_add").click(function () { $.ajax({ type : "POST", url : "/wadmin/ad/addAd", dataType : 'JSON', success : function (data) { if (data.result != 0) { toastr.info("info", data.message); return ; } toastr.success("success", '標簽'); $("#table").bootstrapTable('insertRow', {index:0, row:data.data}); } }); }); ~~~ 綁定的按鈕是toolbar里面的，點擊如果進行ajax請求，再根據請求的結果自行判斷添加 ![](https://img.kancloud.cn/11/7b/117b9057846338afcce9bb3f838e28f4_504x246.png) 5.表格中列格式化成圖標并監聽事件 6.文件上傳（基于5）列參數中添加如下代碼 ~~~javascript { field: 'operate', title: '操作', align: 'center', events: operateEvents, width : '25%', formatter: operateFormatter } ~~~ operateFormatter（這里注意需要添加a標簽包住圖標，并添加class） ~~~javascript function operateFormatter(value, row, index) { return [ '<a class="using" href="javascript:void(0)" title="Remove">', '<i class="fa fa-check"></i>', '</a>    ', '<a class="upload" style="cursor: pointer" href="javascript:void(0)" title="Upload">', '<label style="cursor: pointer" for="'+row['adId']+'">', '<i class="fa fa-upload"></i>', '<input type="file" name="adUpload" style="display: none;" class="adUpload" id="'+row['adId']+'" >', '</label>', '</a>    ', '<a class="remove" href="javascript:void(0)" title="Using">', '<i class="fa fa-times"></i>', '</a>', ].join(''); } ~~~ operateEvents（監聽事件，注意這里是**window**.operateEvents） ~~~javascript window.operateEvents = { 'click .remove': function (e, value, row, index) { $.ajax({ type : "POST", url : "/wadmin/ad/deleteAd", data : { adId : row['adId'] }, dataType : 'JSON', success : function (data) { if (data.result != 0) { toastr.info("info", data.message); return ; } toastr.success("success", '刪除成功'); $("#table").bootstrapTable('remove', { field: 'adId', values: [row['adId']] }); } }); return false; }, 'click .using': function (e, value, row, index) { $.ajax({ type : "POST", url : "/wadmin/ad/usingAd", data : { adId : row['adId'] }, dataType : 'JSON', success : function (data) { if (data.result != 0) { toastr.info("info", data.message); return ; } toastr.success("success", '使用該廣告'); $("#table").bootstrapTable('refresh'); } }); return false; }, 'click .upload': function (e, value, row, index) { $('.adUpload').fileupload({ url : '/wadmin/ad/adUpload/adId/'+row['adId'], dataType: 'json', add: function (e, data) { data.submit(); }, done: function (e, data) { var response = data.result; if (response.result != 0) { toastr.error(response.message); return false; } toastr.success("上傳成功"); $("#table").bootstrapTable('refresh'); } }); return false; } }; ~~~ 實現的效果如下： ![](https://img.kancloud.cn/11/9b/119b4d48ab703eac30c9e06c5dbd89cf_275x463.png) **7.行內編輯** 普通的編輯只需要在列參數中設置即可：列參數中添加代碼 ~~~ editable : true, ~~~ * 1 需要下拉編輯的，使用如下代碼： ~~~ editable: { type: 'select', source: [ //0->無廣告，1->靜態不可點擊，2->靜態可點擊，3->動態不可點擊，4->動態可點擊 {value: 0, text: '無廣告'}, {value: 1, text: '靜態不可點擊'}, {value: 2, text: '靜態可點擊'}, {value: 3, text: '動態不可點擊'}, {value: 4, text: '動態可點擊'}, ] } ~~~ 這里還有一些行內編輯的樣式是需要導入第三方lib的，比如說如果要實現行內時間的編輯，需要下載導入`combodate.js`，然后添加如下代碼（這些js文件后面會給出的，也可以去官網下載最新版）： ~~~ editable: { type: 'combodate', viewformat: 'YYYY-MM-DD HH:mm:ss', template: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss', combodate: { minuteStep: 1, secondStep: 1, maxYear: 5000, minYear: 2016, } } ~~~ 然后再表格參數中添加如下代碼監聽事件： ~~~ onEditableSave: function (field, row, oldValue, $el) { $.ajax({ type: "post", url: "/wadmin/ad/updateAdInfo", dataType : 'json', data: row, success: function (data, status) { if (status == "success" && data.result == 0) { toastr.success('更新成功'); if (field == 'jumpUrl') { $('#table').bootstrapTable("refresh"); } return true; } else { toastr.info(data.message); $('#table').bootstrapTable("refresh"); } }, error: function () { alert("Error"); }, complete: function () { } }); } ~~~ 實現的效果如下： ![](https://img.kancloud.cn/cf/06/cf06cf2a9c6ca6de1dd7faa51f3b88f6_326x151.png) ![](https://img.kancloud.cn/42/1b/421b185dec3e34ff18b5ae3507393002_317x183.png) ![](https://img.kancloud.cn/67/f6/67f6cfbbfd90c9a1ba7b9c653d2d1fd2_660x238.png) > 其中，調用bootstraptable的一些方法可以動態更新表格（增刪改等），用法如下： ~~~ $("#table").bootstrapTable('insertRow', {index:0, row:data.data}); $("#table").bootstrapTable('remove', { field: 'adId', values: [row['adId']] }); $("#table").bootstrapTable('refresh'); $("#table").bootstrapTable('updateCell', { index : index, field: 'status', value: row['status'] ? 0 : 1 }); ~~~ > 因為引入的js和css庫有點多，而且需要實現行內編輯的話需要需要引入的js文件比較難找，下面給出下載地址（密碼：jjdk）： [http://pan.baidu.com/s/1bpiRObt](http://pan.baidu.com/s/1bpiRObt) ## **完整代碼** html ~~~html <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增廣告 </button> </div> <table id="table"></table> ~~~ javascript ~~~javascript /** * Created by raid on 2016/12/28. */ $(function () { window.operateEvents = { 'click .remove': function (e, value, row, index) { $.ajax({ type : "POST", url : "/wadmin/ad/deleteAd", data : { adId : row['adId'] }, dataType : 'JSON', success : function (data) { if (data.result != 0) { toastr.info("info", data.message); return ; } toastr.success("success", '刪除成功'); $("#table").bootstrapTable('remove', { field: 'adId', values: [row['adId']] }); } }); return false; }, 'click .using': function (e, value, row, index) { $.ajax({ type : "POST", url : "/wadmin/ad/usingAd", data : { adId : row['adId'] }, dataType : 'JSON', success : function (data) { if (data.result != 0) { toastr.info("info", data.message); return ; } toastr.success("success", '使用該廣告'); $("#table").bootstrapTable('refresh'); } }); return false; }, 'click .upload': function (e, value, row, index) { $('.adUpload').fileupload({ url : '/wadmin/ad/adUpload/adId/'+row['adId'], dataType: 'json', add: function (e, data) { data.submit(); }, done: function (e, data) { var response = data.result; if (response.result != 0) { toastr.error(response.message); return false; } toastr.success("上傳成功"); $("#table").bootstrapTable('refresh'); } }); return false; } }; /*bootstrap table*/ $('#table').bootstrapTable({ url:"/wadmin/ad/doAdList",//請求數據url toolbar : "#toolbar", // toolbarAlign : "right", queryParams: function (params) { return { offset: params.offset, //頁碼 limit: params.limit, //頁面大小 search : params.search, //搜索 order : params.order, //排序 ordername : params.sort, //排序 }; }, detailView : true, detailFormatter : function (index, row) { var image = '<div class="photos">' +'<a target="_blank" href="'+row['jumpUrl']+'"><img alt="image" class="feed-photo" src="'+row['picUrl']+'"></a>' +'</div>'; return image; }, showHeader : true, showColumns : true, showRefresh : true, pagination: true,//分頁 sidePagination : 'server',//服務器端分頁 pageNumber : 1, pageList: [5, 10, 20, 50],//分頁步進值 search: true,//顯示搜索框 //表格的列 columns: [ { field: 'adId',//域值 title: '廣告ID',//標題 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '5%', }, { field: 'picUrl',//域值 title: '圖片',//標題 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '15%', formatter : function (value, row, index) { return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>" } }, { field: 'jumpUrl',//域值 title: '跳轉鏈接',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '10%', editable : true, cellStyle : function (value, row, index) { return { css: { "max-width": "300px", "word-wrap": "break-word", "word-break": "normal" } }; } }, { field: 'adDesc',//域值 title: '描述',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '10%', editable : true, }, { field: 'displayType',//域值 title: '表現形式',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '10%', editable: { type: 'select', source: [ //0->無廣告，1->靜態不可點擊，2->靜態可點擊，3->動態不可點擊，4->動態可點擊 {value: 0, text: '無廣告'}, {value: 1, text: '靜態不可點擊'}, {value: 2, text: '靜態可點擊'}, {value: 3, text: '動態不可點擊'}, {value: 4, text: '動態可點擊'}, ] } }, { field: 'displaySeconds',//域值 title: '時間',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '5%', editable : true, }, { field: 'scope',//域值 title: '影響范圍',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '10%', editable: { type: 'select', source: [ //0->全國 {value: 0, text: '全國'}, ] } }, { field: 'userType',//域值 title: '影響群體',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '5%', editable: { type: 'select', source: [ //0->全部 {value: 0, text: '全部'}, ] } }, { field: 'status',//域值 title: '狀態',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '10%', formatter : function (value, row, index) { return value==1||value=='1' ? '正在使用' : '沒有使用'; } }, { field: 'addTime',//域值 title: '時間',//內容 visible: true,//false表示不顯示 sortable: true,//啟用排序 width : '10%', } ,{ field: 'operate', title: '操作', align: 'center', events: operateEvents, width : '25%', formatter: operateFormatter } ], onEditableSave: function (field, row, oldValue, $el) { $.ajax({ type: "post", url: "/wadmin/ad/updateAdInfo", dataType : 'json', data: row, success: function (data, status) { if (status == "success" && data.result == 0) { toastr.success('更新成功'); if (field == 'jumpUrl') { $('#table').bootstrapTable("refresh"); } return true; } else { toastr.info(data.message); $('#table').bootstrapTable("refresh"); } }, error: function () { alert("Error"); }, complete: function () { } }); } }); $("#btn_add").click(function () { $.ajax({ type : "POST", url : "/wadmin/ad/addAd", dataType : 'JSON', success : function (data) { if (data.result != 0) { toastr.info("info", data.message); return ; } toastr.success("success", '標簽'); $("#table").bootstrapTable('insertRow', {index:0, row:data.data}); } }); }); function operateFormatter(value, row, index) { return [ '<a class="using" href="javascript:void(0)" title="Remove">', '<i class="fa fa-check"></i>', '</a>    ', '<a class="upload" style="cursor: pointer" href="javascript:void(0)" title="Upload">', '<label style="cursor: pointer" for="'+row['adId']+'">', '<i class="fa fa-upload"></i>', '<input type="file" name="adUpload" style="display: none;" class="adUpload" id="'+row['adId']+'" >', '</label>', '</a>    ', '<a class="remove" href="javascript:void(0)" title="Using">', '<i class="fa fa-times"></i>', '</a>', ].join(''); } }); ~~~