表格插件-bootstrap table的分页使用示例

1:在官网上下载相关的文件之后,步骤下载之后引入:

<!-- 引入的css文件  -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"
    rel="stylesheet">
<!-- 引入的js文件 -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

2:html界面

<div class="mytab">
                <table id="mytab" class="table table-hover"></table>
                </div>

3:js代码

$('#mytab').bootstrapTable({
        method : 'post',
        // contentType:
        // "application/x-www-form-urlencoded",//当请求方法为post的时候,必须要有!!!!
        url : path + "/user/list",// 请求路径
        striped : true, // 是否显示行间隔色
        pageNumber : 1, // 初始化加载第一页
        pagination : true,// 是否分页
        sidePagination : 'client',// server:服务器端分页|client:前端分页
        pageSize : 4,// 单页记录数
        pageList : [ 5, 10, 20, 30 ],// 可选择单页记录数
        //showRefresh : true,// 刷新按钮
        queryParams : function(params) {// 上传服务器的参数
            var temp = {// 如果是在服务器端实现分页,limit、offset这两个参数是必须的
                limit : params.limit, // 每页显示数量
                offset : params.offset, // SQL语句起始索引
            // page: (params.offset / params.limit) + 1, //当前页码

            };
            return temp;
        },
        columns : [ {
            title : '登录名',
            field : 'loginName',
            sortable : true
        }, {
            title : '昵称',
            field : 'nickName',
            sortable : true
        }, {
            title : '角色',
            field : 'roleName',
        }, {
            title : '操作',
            field : 'id',
            formatter : option
        } ]
    })

4:完整的添加数据之后显示在表格里面,自动分页代码,删除和编辑效果 jsp界面 :

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>

<%
    String path = request.getRequestURI();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<base href="<%=basePath%>">


  <title>用户管理</title>

  <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.min.css"/>
  <link rel="stylesheet"  href="../../common/bootstrap-table/bootstrap-table.min.css">
  <link rel="stylesheet" type="text/css" href="../../css/user/user.css"/>
<style>
</style>
</head>
<body >
  
  
  <div class="page-content-wrapper">
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet-title">
                    <a href="javascript:;" class="btn default yellow-stripe" id="userAdd"><i class=""></i><span class="hidden-480"> 添加用户</span></a>
                </div>

                <div class="mytab">
                <table id="mytab" class="table table-hover"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="../../js/jquery-1.9.1.js"/></script>

<script src="../../common/bootstrap/js/bootstrap.min.js"></script>
<script src="../../common/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../common/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../../js/user/user.js"/></script>
<!-- 弹框 -->
<script src="../../common/layer/layer.js"></script>
<script src="../../common/layer/extend/layer.ext.js"></script>
    

</body>
</html>

js代码:

var path = getContextPath();

$(function() {
    $('#mytab').bootstrapTable({
        method : 'post',
        // contentType:
        // "application/x-www-form-urlencoded",//当请求方法为post的时候,必须要有!!!!
        url : path + "/user/list",// 请求路径
        striped : true, // 是否显示行间隔色
        pageNumber : 1, // 初始化加载第一页
        pagination : true,// 是否分页
        sidePagination : 'client',// server:服务器端分页|client:前端分页
        pageSize : 4,// 单页记录数
        pageList : [ 5, 10, 20, 30 ],// 可选择单页记录数
        //showRefresh : true,// 刷新按钮
        queryParams : function(params) {// 上传服务器的参数
            var temp = {// 如果是在服务器端实现分页,limit、offset这两个参数是必须的
                limit : params.limit, // 每页显示数量
                offset : params.offset, // SQL语句起始索引
            // page: (params.offset / params.limit) + 1, //当前页码

            };
            return temp;
        },
        columns : [ {
            title : '登录名',
            field : 'loginName',
            sortable : true
        }, {
            title : '昵称',
            field : 'nickName',
            sortable : true
        }, {
            title : '角色',
            field : 'roleName',
        }, {
            title : '操作',
            field : 'id',
            formatter : option
        } ]
    })

    // 定义删除、更新操作
    function option(value, row, index) {
        var htm = '<button id="delUser" userId='
                + value
                + ' onclick="delUser(this)">删除</button><button id="dupUser" onclick="updUser('
                + value + ')">修改</button>'
        return htm;
    }

    // 查询按钮事件
    $('#search_btn').click(function() {
        $('#mytab').bootstrapTable('refresh', {
            url : path + '/user/list'
        });
    })

    // 添加用户
    $("#userAdd").on("click", function() {
        layer.open({
            type : 2,
            title : '添加用户',
            area : [ '500px', '440px' ],
            fix : false, // �
            content : path + '/user/pageAdd',
            end : function() {
                $("#mytab").bootstrapTable('refresh', {
                    url : path + "/user/list"
                });
            }
        });
    });

})

// 删除用户
function delUser(dom) {
   
    var mymessage = confirm("确认删除嘛?");
    if (mymessage == true) {
        $.ajax({
            url : path + '/user/' + $(dom).attr("userId"),
            type : 'delete',
            success : function(data) {
                $(dom).parent().parent().hide();
            },
            error : function(data){
                alert("服务器繁忙")
            }
        });
    }
}

// 编辑用户
function updUser(id) {
    layer.open({
        type : 2,
        title : '编辑用户',
        area : [ '500px', '440px' ],
        fix : false, // �
        content : path + '/user/pageUpd/' + id,
        end : function() {
            $("#mytab").bootstrapTable('refresh', {
                url : path + "/user/list"
            });
        }
    });
}

// 获取项目路径
function getContextPath() {
    var currentPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = currentPath.indexOf(pathName);
    var localhostPath = currentPath.substring(0, pos);
    var projectName = pathName
            .substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPath + projectName);
}

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏happyJared

IDEA快捷键拆解系列(十六):插件篇

  本文整理了博主用过的一些IDEA插件。其中,五星是强烈推荐,四星是比较推荐,三星仅供参考,两星的就不多说了,一星是炫酷型的插件,一般帮助也不大。最后,欢迎留...

3372
来自专栏北京马哥教育

从零开始的 Python 爬虫速成指南

序 本文主要内容:以最短的时间写一个最简单的爬虫,可以抓取论坛的帖子标题和帖子内容。 本文受众:没写过爬虫的萌新。 入门 0.准备工作 需要准备的东西: Pyt...

3826
来自专栏拂晓风起

cocos2d-js 调试办法 断点调试 Android真机调试

1902
来自专栏FreeBuf

看我如何通过邮箱获取IP定位

还记得那些年,邮箱钓鱼盛行,各种广告邮件钓鱼邮件层出不穷,经过邮箱防水墙能拦截一部分以外,你是否注意到了正常邮箱可能被有心人利用的姿势?本文将用一个比较难以察觉...

5411
来自专栏Hadoop实操

如何为服务器硬盘配置RAID或JBOD模式

在部署Hadoop平台的过程中,一般会要求数据盘配置RAID 0或者JBOD模式(直通模式),本文将详细讲解如何在HP dl380 Gen9服务器上配置RAID...

4.7K2
来自专栏肖洒的博客

模拟登陆我终于还是进了

爬了这么久的教务处,终于还是绕过了千山万水登进来了。 这段时间准备期末考,忙,好久不更博。 年终总结也没有写。 是时候开更啦!

1092
来自专栏黑泽君的专栏

day51_BOS项目_03

将上面的js文件引入所需要的jsp页面中,本例以index.jsp为例 /bos19/WebContent/WEB-INF/pages/common/inde...

801
来自专栏练小习的专栏

WP-pagenavi插件在分类内分页无效问题

一直用WP-pagenavi这个插件分页,今天突然遇到个大问题,我在首页调用一个分类 <?php query_posts('showposts=2&cat=5'...

2056
来自专栏有趣的Python

程序员装机必备爆款软件推荐与配置(windows版)

做机也要做一只全能的机哦 值此新年来临之即,面对两百多个G的c盘。忍痛割爱将电脑系统重装,版本为(win10:1079)之后的所有电脑环境更新,专业软件安装均会...

4683
来自专栏coding...

swift3.0 coreData的使用-日记本demo效果需求分析创建工程添加数据库改写Detail页面改写Master页面Demo地址

基于官方MasterDetail模板,官方写了很多复杂的coredata逻辑,在此基础上快速开发简单的日记本程序。

934

扫码关注云+社区

领取腾讯云代金券