bootstrap-table 应用
前端代码：js初始化表格，使用服务器端分页：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="xx"> <meta name="description" content="xxx"> <link rel="shortcut icon" href="__STATIC__/favicon.ico"> <link href="__STATIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> <link href="__STATIC__/css/font-awesome.css?v=4.4.0" rel="stylesheet"> <link href="__STATIC__/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"> <link href="__STATIC__/css/animate.css" rel="stylesheet"> <link href="__STATIC__/css/style.css?v=4.1.0" rel="stylesheet"> </head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="col-sm-12"> <!-- Example Pagination --> <div id="toolbar"> <div class="btn-group hidden-xs" id="exampleToolbar" role="group"> <a class="btn btn-outline btn-default" href="{:url('Host/getInfo')}"> <i class="fa fa-plus" aria-hidden="true">添加</i> </a> <button type="button" id="batchUp" name="up" class="btn btn-outline btn-default"> <i class="fa fa-level-up" aria-hidden="true">上线</i> </button> <button type="button" id="batchDown" name="down" class="btn btn-outline btn-default"> <i class="fa fa-level-down" aria-hidden="true">下线</i> </button> <button type="button" id="batchDelete" name="delete" class="btn btn-outline btn-default"> <i class="fa fa-remove" aria-hidden="true">删除</i> </button> </div> </div> <table id="hostTable" class="table table-hover"></table> </div> <!-- End Example Pagination --> </div> </div> </div> </div> <!-- End Panel Other --> </div> <!-- 全局js --> <script src="__STATIC__/js/jquery.min.js?v=2.1.4"></script> <script src="__STATIC__/js/bootstrap.min.js?v=3.3.6"></script> <!-- 自定义js --> <script src="__STATIC__/js/content.js?v=1.0.0"></script> <!-- Bootstrap table --> <script src="__STATIC__/js/plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="__STATIC__/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script> <script src="__STATIC__/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <script> $(function () { var table = $('#hostTable').bootstrapTable( { url: "{:url('Host/hostJson')}", //请求url dataField: "rows", //服务器返回数据放的键值 search: true, //是否搜索 pagination: true, //是否分页 pageNumber: 1, //初始化加载第一页 pageSize: 10, //每页的记录行数 pageList: [10, 20, 50, 100], //可供选择的每页的行数 sidePagination: "server",//服务器端分页 dataType: "json", //返回数据类型 method: "post", //请求方式 searchAlign: "right", //查询框对其方式 searchText: "{$ser?? ''}", sortName:"status", //定义默认排序列 sortOrder:"desc", //定义默认排序规则 queryParamsType: "limit",//查询参数组织方式 queryParams: function getParams(params) { params.other = "otherInfo"; return params; }, //传递参数 iconSize: 'outline', showRefresh: true, // 刷新按钮 showColumns: true, //列选择按钮 buttonsAlign: "right", // 按钮对齐方式 toolbar: "#toolbar", //指定工具栏 toolbarAlign: "left", //工具栏对齐方式 striped: true, //是否显示间隔色 cache: false, //是否使用缓存，默认true rowStyle: function (row, index) { //5个取值代表5种颜色 //['active','success','info','warning','danger'] var strClass = ""; if (row.status == 0) { strClass = 'success'; } else { strClass = 'danger'; } return {classes: strClass}; }, columns: [ { checkbox: true, width: '5%' }, { field: 'ip',//键名 title: 'IP',//标题 sortable: true,//是否可排序 width: '10%', formatter: function (value, row, index) { if (row.screen) { return '<a href="http://falcon.kaixin002.com/screen/' + row.screen + '" target="_blank">' + row.ip + '</a> '; } else { return row.ip; } } }, { field: 'nip', title: 'NIP', sortable: true, width: '10%' }, { field: 'role', title: '角色', sortable: true, width: '18%', formatter: function (value, row, index) { var roles = row.role.split(' '); var roleHref = ""; for (var i = 0; i < roles.length; i++) { roleHref += '<a href="{:url(\'Host/index\')}?ser=' + roles[i] + '">' + roles[i] + '</a> '; } return roleHref; } }, { field: 'gameserver', title: '游戏服', sortable: true, width: '8%' }, { field: 'serverid', title: 'serverID', sortable: true, width: '8%' }, { field: 'status', title: '状态', sortable: true, width: '8%', formatter: function (value, row, index) { var str = "线下"; if (row.status == 0) { str = "线上"; } return str; } }, { field: 'remark', title: '备注', width: '20%' }, { field: 'ctime', title: '申请日期', sortable: true, width: '8%' }, { title: '操作', field: 'id', align: 'center', width: '5%', formatter: function (value, row, index) { var html = '<a href="{:url(\'Host/getInfo\')}?id=' + row.id + '">编辑</a>'; return html; } }, ], locale: "zh-CN",//中文支持 detailView: false,//是否显示详情折叠 }); $("#batchUp,#batchDown,#batchDelete").click(function () { var name = $(this).prop('name'); var selections = table.bootstrapTable('getSelections'); if (selections.length <= 0) { window.alert("请选择数据!"); return false; } if (name == 'delete') { var st = confirm('确认删除?'); if (!st) { return false; } } var i = 0; var ids = []; $.each(selections, function () { ids[i] = selections[i]['id']; i++; }); var postInfo = { 'ids': ids, 'deal': name }; var postUrl = "{:url('Host/batchDeal')}"; var dealStr = { 'up': '上线', 'down': '下线', 'delete': '删除' }; $.ajax({ type: "post", url: postUrl, data: {postInfo: postInfo}, success: function (data, status) { if (data == 1) { window.alert('所选主机 <' + dealStr[name] + '> 成功!'); } else { window.alert(data); return false; } window.location.href = "{:url('Host/index')}"; }, error: function () { window.alert(name + "请求失败!"); return false; } }); }); }); </script> </body> </html>
后端处理代码：
$search = $this->request->post('search'); $searchWhere = null; if (!empty($search)) { $searchWhere = " WHERE CONCAT(`ip`,`nip`,`role`,`gameserver`,`serverid`,`status`) LIKE '%$search%' "; } $sort = $this->request->post('sort'); $sortWhere = null; if (!empty($sort)) { $order = $this->request->post('order'); $sortWhere = " ORDER BY `$sort` $order "; } $sql = "SELECT `id`,`ip`,`nip`,`role`,`gameserver`,`serverid`,`status`,`remark`,DATE_FORMAT(ctime,'%Y-%m-%d') as `ctime` FROM $table "; $sqlCount = "SELECT COUNT(1) FROM $table "; if (!empty($searchWhere)) { $sql .= " $searchWhere "; $sqlCount .= " $searchWhere "; } if (!empty($sortWhere)) { $sql .= " $sortWhere "; } $offset = $this->request->post('offset/d'); $limit = $this->request->post('limit/d'); $sql .= " limit $offset,$limit "; //使用原生查询，返回结果集 $jsonData = ''; $result = Db::query($sql); foreach ($result as $i => $info) { $screen = $this->getScreenInfo($info['ip']); if ($screen) { $result[$i]['screen'] = $screen[0]; } } $count = Db::query($sqlCount); $count = $count[0]['COUNT(1)']; if ($result !== false) { //转化为json $data['total'] = $count; $data['rows'] = $result; $jsonData = json_encode($data, JSON_UNESCAPED_UNICODE); } echo $jsonData;
