bootstrap table数据分页查询展示

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>

效果

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

Oracle、MySql、SQLServer数据分页查询
看过此博文后Oracle.MySql.SQLServer 数据分页查询,在根据公司的RegionRes表格做出了 SQLserver的分页查询语句: 别名.字段 FROM( SELECT row_nu ...
Oracle、MySql、SQLServer 数据分页查询
最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一). mysql的分页查询 mysql的分页查询是最简单的,借 ...
[.NET] SQL数据分页查询
[.NET] SQL数据分页查询程序下载范例下载:点此下载原始码下载:点此下载 NuGet封装:点此下载数据查询开发系统时,使用C#执行SQL查询指令,就可以从SQL数据库里查询所需数据. ...
bootstrap table 服务器端分页例子分享
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载复制代码代码如下: function getTab(){var ...
转Oracle、MySql、SQLServer 数据分页查询
最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一). mysql的分页查询 mysql的分页查询是最简单的,借 ...
161222、Bootstrap table 服务器端分页示例
bootstrap版本为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
[前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
C# Bootstrap table之分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
[转]C# Bootstrap table之分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

随机推荐

php----空字符串的和NULL的区别
空字符串和null的区别是非常的大的,虽然都是没有任何东西,但是空字符串会占据一个内存,只是在这里内存里面没有东西而已,但是null就是完全不存在这个东西,他是不会开辟内存. $str1 = &quo ...
二步实现远程连接阿里云SqlServer 2012 数据库服务器
前言:在使用阿里云上的一些产品时,遇到不少坑. 安装IIS 时,遇到因买的配置过低,虚拟内存不足,而导致 IIS 总是安装失败: 现在在上面安装了个 Sql Sever 2012,远程老是不 ...
Spring注解及作用
一: spring mvc中的@PathVariable是用来获得请求url中的动态参数的 @PathVariable用于方法中的参数,表示方法参数绑定到地址URL的模板: 例 @Controller ...
HDU 2602 - Bone Collector - [01背包模板题]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 Many years ago , in Teddy’s hometown there was a ...
MySQL存储引擎中的MyISAM和InnoDB
在使用MySQL的过程中对MyISAM和InnoDB这两个概念存在了些疑问,到底两者引擎有何分别一直是存在我心中的疑问.为了解开这个谜题,搜寻了网络,找到了如下信息: MyISAM是MySQL的默认数 ...
Python：正则表达式的一些例子
#匹配电话号码(前面3/4-后面7-8): '\d{3,4}-\d{7,8}' #匹配QQ号(从号码1000开始第一位不能为0): '[1,9][0,9]{4}' #匹配身份证(15位数或者18位,考 ...
python3学习笔记(3)_dict-set
# !/usr/bin/env python3 # -*- coding:utf8 -*- #dict 和 set #dict dictionary 用于存放键值对的, 无序,key 不可变 #姓名 ...
java实现从服务端下载文件
这边用一个简单的servlet实现java从服务端下载文件的操作写一个servlet: <servlet> <servlet-name>DownloadServlet< ...
洛谷P4437 排列 [HNOI/AHOI2018] 贪心
正解:贪心解题报告: 传送门! 发现做题龟速,,,所以懒得写题目大意辣自己get一下QAQ 首先看到ai<=n,又当ai=j时j在i的前面,所以就变成对于每个点i有一个约束,即要求第ai个节点 ...
问题：bower git is not installed or not in the path
用bower install jquery安装jquery,bower提示错误bower git is not installed or not in the path. 根据错误信息的知道出现错误两 ...

bootstrap table数据分页查询展示

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

随机推荐

热门专题