如何使用bootstrap进行数据的分页展示,分页技术有:前端分页,和后端分页,私聊:可以定制基本的增删改查的前后端代码生成的插件

一、前期的工作:引入相应的js和css样式(可以网上下载,或者私聊我个人:QQ:27530091)

<link href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<script src="bootstrap-table/bootstrap-table.min.js"></script>
<script src="bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

二、相应的字段渲染

//生成用户数据
$('#mytab').bootstrapTable({
    method: 'post',
    contentType: "application/x-www-form-urlencoded",//必须要有!!!!
    url: "url",//要请求数据的文件路径
    toolbar: '#toolbar',//指定工具栏
    striped: true, //是否显示行间隔色
    dataField: "res",
    sortable: true, //是否启用排序 sortOrder: "ID asc",
    sortOrder: "ID asc",
    pagination: true,//是否分页
    queryParamsType: 'limit',//查询参数组织方式
    queryParams: queryParams,//请求服务器时所传的参数
    sidePagination: 'server',//指定服务器端分页或者是客户端分页
    // 设置在哪里进行分页,可选值为"client" 或者
	// "server"
	// queryParams : queryParams,
	// //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果
	// queryParamsType = 'limit' ,返回参数必须包含
	// limit, offset, search, sort, order 否则, 需要包含:
	// pageSize, pageNumber, searchText, sortName,
	// sortOrder.
	// 返回false将会终止请求
    pageNumber: 1, //初始化加载第一页,默认第一页
    pageSize: 10,//单页记录数
    pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],//分页步进值
    showRefresh: true,//刷新按钮
    showColumns: true,
    clickToSelect: true,//是否启用点击选中行
    toolbarAlign: 'right',//工具栏对齐方式
    buttonsAlign: 'right',//按钮对齐方式
    toolbar: '#toolbar', search: true,
    uniqueId: "id",                     //每一行的唯一标识,一般为主键列
    showExport: true,
    exportDataType: 'all',
    columns: [
        {
            title: '全选',
            field: 'select',
            //复选框
            checkbox: true,
            width: 25,
            align: 'center',
            valign: 'middle'
        },
        {
            title: '表格显示字段名',
            field: 'javaBean组件字段名',
            align: 'center',
            sortable: true
        }
        ,
        {
            title: '表格显示字段名',
            field: 'javaBean组件字段名',
            align: 'center',
            sortable: true
            formatter: function (value, row, index) {
                //格式化操作,value:指的是当前字段的值,row指的是当前行的值,index指的是索引值
            }
        }
        ,
        {
            title: '操作',
            align: 'center',
            field: '',
            formatter: function (value, row, index) {
                var e = '<a title="编辑" href="javascript:void(0);" id="cashSubject"  data-toggle="modal" data-id="\'' + row.id + '\'" data-target="#myModal" onclick="return edit(\'' + row.id + '\')"><i class="glyphicon glyphicon-pencil" alt="修改" style="color:green">修改</i></a> ';
                var d = '<a title="删除" href="javascript:void(0);" onclick="del(' + row.id + ',' + row.isActive + ')"><i class="glyphicon glyphicon-trash" alt="删除" style="color:red">删除</i></a> ';
                var f = '';
                if (row.isActive == 1) {
                    f = '<a title="启用" href="javascript:void(0);" onclick="updatestatus(' + row.id + ',' + 0 + ')"><i class="glyphicon glyphicon-ok-sign" style="color:green">启用</i></a> ';
                } else if (row.isActive == 0) {
                    f = '<a title="停用" href="javascript:void(0);" onclick="updatestatus(' + row.id + ',' + 1 + ')"><i class="glyphicon glyphicon-remove-sign"  style="color:red">停用</i></a> ';
                }

                return e + d + f;
            }
        }
    ],
    locale: 'zh-CN',//中文支持,
    responseHandler: function (res) {
        if (res) {
            return {
                "res": res.rows,
                "total": res.total
            };
        } else {
            return {
                "rows": [],
                "total": 0
            };
        }
    }
})
//请求服务数据时所传参数
function queryParams(params) {
	//使用bootstrap的表格搜索控件,.search input 是搜索的表单值
    var title = "";
    $(".search input").each(function () {
        title = $(this).val();
    });
    return {
        //每页多少条数据
        pageSize: this.pageSize,
        //请求第几页
        pageIndex: this.pageNumber,
        //搜索的值
        searchVal: title
    }
}
//查询按钮事件
$('#search_btn').click(function () {
    $('#mytab').bootstrapTable('refresh', {url: 'url'});
})
//刷新
function refush() {
    $('#mytab').bootstrapTable('refresh', {url: 'url'});
}

三、后端分页的参数
int pageSize,分页大小
int pageIndex, //当前页
String searchVal//条件搜索
四、后端返回的基本格式

	private static final long serialVersionUID = 1L;
	//总记录数
	private long total;
	//每页显示记录数
	private int pageSize;
	//当前页数
	private int currentPage;
	//返回的列表
	private List<T> rows;
必须返回的是**json**格式数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值