bootstrap-table表格插件获取分页参数

bootstrap-table是一款非常优秀表格插件,因为本人初次使用,还不是很熟悉,在使用的过程中遇到了一些问题,遂记录在此与大家分享。

插件的使用最重要是配置参数,表格插件更重要的是分页,所以这里有几个很重要的参数大家一定要注意:

1.一般分页都是在服务器端分页,所以

sidePagination : "server",

2.页数和页面大小

pageNumber : 1, //初始化加载第一页,默认第一页
pageSize : 10, //每页的记录行数(*)

3.查询参数类型,默认是‘limit‘,注意:如果想获取页面偏移量offset和页面大小pageSize,参数queryParamsType可不配

queryParamsType : "limit", queryParams : getParams,
//获取参数方法function getParams(params) {
     var temp = {
          pageSize : params.limit,
          offset: params.offset
     };
     return temp;
}

如果想获取当前页数pageNumber和页面大小pageSize,请配置为:

queryParamsType : "",queryParams : getParams,
//获取参数
function getParams(params) {
    var temp = {
        pageSize : params.pageSize,
        pageNumber : params.pageNumber
    };
    return temp;
}

通过上面的参数配置,后台就可以取到相应的参数进行分页查询了

时间: 2024-08-03 13:47:46

bootstrap-table表格插件获取分页参数的相关文章

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

Bootstrap Table表格一直load不了数据

bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据. $("#button").click(function(){ var name=$("input[name='name']").val(); $('#table').bootstrapTable('load

Bootstrap Table 表格参数详解

表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-classes String 'table table-hover' 表格的类名称.默认情况下,表格是有边框的,你可以添加 'table-no-bordered' 来删除表格的边框样式. sortClass data-sort-class String undefined The class name of the td ele

web多终端开发学习系列(三)--- 基于bootstrap的表格插件bootstrap-table

基于网页管理系统的开发大多数功能只是对数据的显示与操作,对于数据的显示一般都是通过table表格来显示,所以管理系统的开发很有必要引入表格插件,对于sencha touch等商业化框架,都有自己自带的表格控件,而对于bootstrap需要引入第三方的表格插件,这里我学习下bootstrap table. 介绍 bootstrap table是基于bootstrap框架的一个表格插件,官网地址是http://wenzhixin.net.cn/p/bootstrap-table/docs/index

自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计

table表格,选择框 form id="editForm1"> <table class="table_form"> <td >经济性质:</td> <td > <input width="150" type="text" id="nature_id" readonly onclick="show_nature()">

jQuery 插件 获取URL参数

jQuery 获取URL参数的插件 jQuery Url Query String 下载地址:http://plugins.jquery.com/getUrlQueryString.js/ var url="www.abc.com/index.html?key=hello"; var $arrUrl = $.getUrlQueryString(url); var key=$arrUrl["key"];

jQuery插件—获取URL参数

做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如下插件: 例如 当前你的URL是: http://www.xxx.com/index.php?test=1&kk=2 如果想获取test,则可以引入插件后, 用如下方法获取: var test = $.query.get(’test’); 如果参数有多个相同的名称 ,则可以这样: var arr = $.query.get(’testy’); 输出:  [ 值1 ,  值2,  值3...] 如果要获取多个相同名称中的某一个,可以这样

bootstrap table表格前台分页,点击tab选项,重新刷新表格

近期做项目的时候使用bootstrap表格前台分页,并且有一个tab切换选项,共用一个table,效果如下图,上方是tab选项,下方是table: 在实际实现的时候,在默认状态下,表格翻到了第5页,此时我要按年龄进行筛选,刚开始我的做法是直接$("#table").bootstrapTable('refresh',option):option里边是一个筛选的条件,这样的效果是页面会展示所选条件下第5页的内容,而不是第一页的内容,这就违背了项目的需求,后来经过搜索.探讨找到了一种解决方案

layer学习笔记之table表格引入数据实现分页

LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的使用,但是layer页面效果使用也是非常好用的. 之前写一个一个关于数据的table表格显示 并带有分页功能,实现过程遇到了很多问题,现抽空总结一下. 使用之前请先详细阅读layer的文档:http://www.layui.com/doc/modules/layer.html 首先下载最新版的lay