index.php

<html>

<head>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <link rel="stylesheet" href="./css/bootstrap-table.css">

    <script src="./js/jquery.min.js"></script>

    <script src="./js/bootstrap.min.js"></script>

    <script src="./js/bootstrap-table.js"></script>

    <script src="./js/bootstrap-table-zh-CN.js"></script>

</head>

<div style="width: 1000px;">

<p id="page-content" class="animated fadeInRight">

<p class="col-sm-4 col-md-3 col-lg-3" style="width: 100%;">

    <form  id="search_User">

<p class="panel-body search_box">

<p class="search_p">

    <label for="search_name">用户姓名：</label>

    <input type="text" class="form-control" id="search_name" name="UserV2.name" >

</p>

<p class="search_p">

    <label for="search_mobile">手机号：</label>

    <input type="text" class="form-control" id="search_mobile" name="UserV2.phone" >

</p>

<p class="search_p">

    <label for="search_sex">性别：</label>

    <select class="form-control" id="search_sex" name="UserV2.sex"><option value="">---请选择---</option><option value="男">男</option><option value="女">女</option></select>

</p>

</p>

<p class="panel-body search_box">

<p class="search_p">

    <label for="search_name">用户账号：</label>

    <input type="text" class="form-control" id="search_username" name="UserV2.username" >

</p>

<p class="search_p">

    <label for="search_name">用户Email：</label>

    <input type="text" class="form-control" id="search_email" name="UserV2.email" >

</p>

<p class="search_p" style="text-align: center;">

    <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/>

</p>

</p>

</form>

</p>

</div>

<div style="height:auto;">

<table id="userListTable" ></table>

</div>

</p>

</html>

<script>

    $(function(){

        var columns=[

            {

                checkbox: true,

                align: 'center',

                valign: 'middle',

            },

            {

                title: 'ID',

                field: 'id',

                align: 'center',

                valign: 'middle',

            },

            {

                title: '用户姓名',

                field: 'name',

                align: 'center',

                valign: 'middle',

            },

            {

                title: '性别',

                field: 'sex',

                align: 'center',

            },

            {

                title: '用户账号',

                field: 'username',

                align: 'center',

            },

            {

                title: '手机号',

                field: 'phone',

                align: 'center',

            },

            {

                title: '邮箱',

                field: 'email',

                align: 'center',

            },

            {

                title: '权限',

                field: 'rolename',

                align: 'center',

            },

            {

                title: '操作',

                field: 'id',

                align: 'center',

                formatter:function(value,row,index){

                    var e = '<button href="#" class="btn btn-primary"  onclick="edit(\''+ row.id + '\')">编辑</button> ';

                    var d = '<button href="#" class="btn btn-danger"  onclick="del(\''+ row.id +'\')">删除</button> ';

                    return e+d;

                }

            }

        ];

        a('./data.php',columns);

    });

    function a (dataurl,columns) {

        $('#userListTable').bootstrapTable({

            url: dataurl,

            method:"post",

            dataType: "json",

            contentType: "application/x-www-form-urlencoded",

            striped:true,//隔行变色

            cache:false,  //是否使用缓存

            showColumns:false,// 列

//            toobar:'#toolbar',

            pagination: true, //分页

            paginationLoop:false,

            paginationPreText:'上一页',

            paginationNextText:'下一页',

//            showFooter:true,//显示列脚

//            showRefresh:true,//显示刷新

            showPaginationSwitch:false,//是否显示数据条数选择框

            sortable: false,           //是否启用排序

            singleSelect: false,

            search:false, //显示搜索框

            buttonsAlign: "right", //按钮对齐方式

            showRefresh:false,//是否显示刷新按钮

            sidePagination: "server", //服务端处理分页

            pageNumber:1,

            pageSize:5,

            pageList:[5,10, 25, 50, 100],

            undefinedText:'--',

            uniqueId: "id", //每一行的唯一标识，一般为主键列

            queryParamsType:'',

            queryParams: queryParams,//传递参数（*）

            columns: columns

        });

        //得到查询的参数

        function queryParams (params) {

            var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

                pageSize: params.pageSize,  //页面大小

                pageNumber: params.pageNumber, //页码

                username: $("#search_username").val(),//后台请求传的查询参数

                name:$("#search_name").val(),

                sex:$("#search_sex").val(),

                phone:$("#search_mobile").val(),

                email:$("#search_email").val(),

            };

            return temp;

        };

    }

    //搜索

    function serachUser() {

        $("#userListTable").bootstrapTable('refresh');

    }

</script>

效果

相关资料地址：

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

http://www.php.cn/js-tutorial-362548.html

bootstrap table数据分页查询展示的更多相关文章

  1. Oracle、MySql、SQLServer数据分页查询

    看过此博文后Oracle.MySql.SQLServer 数据分页查询,在根据公司的RegionRes表格做出了 SQLserver的分页查询语句: 别名.字段 FROM( SELECT row_nu ...

  2. Oracle、MySql、SQLServer 数据分页查询

    最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一). mysql的分页查询 mysql的分页查询是最简单的,借 ...

  3. [.NET] SQL数据分页查询

    [.NET] SQL数据分页查询 程序下载 范例下载:点此下载 原始码下载:点此下载 NuGet封装:点此下载 数据查询 开发系统时,使用C#执行SQL查询指令,就可以从SQL数据库里查询所需数据. ...

  4. bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  5. 转Oracle、MySql、SQLServer 数据分页查询

    最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一). mysql的分页查询 mysql的分页查询是最简单的,借 ...

  6. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

  7. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  8. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  9. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

随机推荐

  1. 7.20python线程(2)

    RLock 递归锁 线程事件

  2. Yii2 使用json 和设置component 中'format' => yii\web\Response::FORMAT_JSON 的区别

    在Yii2中如果设置了 'response' => [  'format' => yii\web\Response::FORMAT_JSON,  'charset' => 'UTF- ...

  3. vue报错 Module not found: Error: Cannot resolve 'file' or 'directory'

    炸了,我好写sell而组件,直接就用了,我的天哪 看你的写了吗,就用: Module not found: Error: Cannot resolve 'file' or 'directory' 页另 ...

  4. 51nod 1126 - 求递推序列的第N项 - [找规律]

    题目链接:https://cn.vjudge.net/problem/51Nod-1126 有一个序列是这样定义的:f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + ...

  5. POJ 2195 - Going Home - [最小费用最大流][MCMF模板]

    题目链接:http://poj.org/problem?id=2195 Time Limit: 1000MS Memory Limit: 65536K Description On a grid ma ...

  6. ECNU 3263 - 丽娃河的狼人传说

    一定要纪念一下第一道在比赛中自己做出来的贪心. 题目链接:http://acm.ecnu.edu.cn/problem/3263/ Time limit per test: 1.0 seconds T ...

  7. SQL Fundamentals || Single-Row Functions || 数字函数number functions

    SQL Fundamentals || Oracle SQL语言 SQL Fundamentals: Using Single-Row Functions to Customize Output使用单 ...

  8. Ubuntu：编译Linux内核源代码和内核模块

    1. 目的 内核模块需要运行在Linux 3.8.13内核中,因此需要为此内核重新编译内核模块源代码. 2. 步骤 1.在Ubuntu 14.04 64位(内核3.13.0-24-generic)上, ...

  9. iOS-数据缓存(转载)

    一.关于同一个URL的多次请求 有时候,对同一个URL请求多次,返回的数据可能都是一样的,比如服务器上的某张图片,无论下载多少次,返回的数据都是一样的. 上面的情况会造成以下问题 (1)用户流量的浪费 ...

  10. flask_SQLAlchemy常用数据类型及列选项

    SQLAlchemy常用数据类型:1. Integer:整形,映射到数据库中是int类型.2. Float:浮点类型,映射到数据库中是float类型.他占据的32位.3. Double:双精度浮点类型 ...