TP5分页很好用,但是样式比较简陋,最近发现了bootstarp-table用来做ajax分页表格挺好的,在这里把方法Mark一下。
首先引入插件,这里不多说,然后就是html页面了,在HTML只需要简单的定义出一个table就即可
//表单
//表格
接着就可以在JS端初始化table了
var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#bootstrap_table').bootstrapTable({ url: "=url('getData')?>", //请求后台的URL(*) method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: false, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) pagination: true, //表格底部显示分页条 sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 15, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 contentType: "application/x-www-form-urlencoded", strictSearch: true, showColumns: true, //是否显示内容下拉框 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //当列数小于此值时,将隐藏内容列下拉框。 clickToSelect: true, //是否启用点击选中行 height: 730, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识,一般为主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [ { field: 'id', title: '订单号' }, { field: 'dt', title: '交易时间' }, { field: 'money', title: '金额' }, { field: 'status', title: '交易状态' }, { field: 'pay_type', title: '支付渠道' }, { field: 'device', title: '终端号' }, { field: 'operator', title: '收银员' }, { field: 'operate', title: '操作', formatter: operateFormatter //自定义方法,添加操作按钮 }, ], }); }; return oTableInit; }; function operateFormatter(value, row, index) {//赋予的参数 return [ '查看', ].join(''); } //提交表单,初始化表格 var validate_2 = jQuery("#form_2").validate({ submitHandler: function (form) { //销毁上次的table,否则只能查询一次 $("#bootstrap_table").bootstrapTable('destroy'); //初始化Table var oTable = new TableInit(); //得到查询的参数 oTable.queryParams = function (params) { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 var temp = $('#form_2').serialize()+'&limit='+params.limit+'&offset='+params.offset; return temp; }; oTable.Init(); } });
现在前端的工作已经完成,剩下的只要写完服务器端逻辑即可(如果选择服务器端分页,服务器给前端传值时格式必须为{'total': '1000', 'rows': '[......]'})
/**
* 获取table数据
* @return \think\response\Json
*/
public function getData()
{
$limit = input('limit');
$offset = input('offset');
$cid = input('client_id');
$stime = input('stime');
$etime = input('etime');
$type = input('type'); //=dm时按订单号查询,=no时按流水号查询
$where = [];
if ($type) {
if ($type == 'dm') {
$where['id'] = input('num');
} else {
$where['no'] = input('num');
}
$total = $this->dmModel->where($where)->count();
$rel = $this->dmModel->where($where)->select();
} else {
$where['dt'] = ['between', "{$stime},{$etime}"];
if ($cid != 24) {
$where['client_id'] = $cid;
$ids = $this->dmMerchantRelation->get_merchant_ids($cid);
if ($ids) {
$where['client_id'] = ['in', $ids];
}
}
$total = $this->dmModel->where($where)->count();
//当偏移值大于总数的一半时,换个方向查询
if ($offset > ceil($total / 2)) {
$offset = $total - $offset;
$rel = $this->dmModel->where($where)->limit("{$limit},{$offset}")->select();
} else {
$rel = $this->dmModel->where($where)->limit("{$limit},{$offset}")->order('id desc')->select();
}
}
//整理数据
$row = $this->sortData($rel);
$ret = ['total' => $total, 'rows' => $row];
return json($ret);
}
/**
* 整理数据
* @param $info
* @return array
*/
protected function sortData($info)
{
$args = [];
foreach ($info as $k => $item) {
$args[$k]['id'] = $item['id'];
$args[$k]['dt'] = $item['dt'];
$args[$k]['money'] = $this->getTotal($item['total'], $item['refund_total']);
$args[$k]['status'] = $this->getStatus($item['refund_total']);
$args[$k]['pay_type'] = get_pay_type($item['pay']) ? get_pay_type($item['pay']) : '未知渠道';
$args[$k]['device'] = "[{$item['device_id']}]" . get_device_name($item['device_id']);
$args[$k]['operator'] = 'xxx';
}
return $args;
}