前端代码：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;

最新文章

  1. MultiWiiWinGUI 汉化版
  2. c#调用存储过程
  3. CC150 - 11.6
  4. FZU 2212 Super Mobile Charger（超级充电宝）
  5. android中的DatePicker与TimePicker
  6. Django 学习笔记之五 Django中数据库中ManyToManyField及ForeignKey
  7. django: db howto - 1
  8. Grok 正则捕获
  9. 讨论IT选定的技术招聘企业几点
  10. Linux 进程同步和通信
  11. 将二维list某列组成新的list
  12. 剑指offer面试题4: 二维数组中的查找
  13. BUG总是存在的
  14. Builder建造者模式
  15. 超全PHP学习资源整理：入门到进阶系列
  16. linux（Centos7）服务器硬件改动，进入Emergency模式
  17. computed
  18. form表单验证字段学习总结
  19. 【SpringCloud微服务实战学习系列】配置详解
  20. k8s helm 可视化UI 管理工具 monocular部署试用

热门文章

  1. [知乎]老狼:深入PCI与PCIe之二：软件篇
  2. poj 3368(RMQ模板)
  3. Java乐观锁、悲观锁
  4. sqlserver中where条件加判断
  5. Python教程：丛入门到实践
  6. 如何将SLIC集成到ESXi中
  7. 洛谷 P4279 [SHOI2008]小约翰的游戏 解题报告
  8. WebSphere概要文件管理工具
  9. RRDtool绘制lvs连接数图形
  10. wget递归下载整站