Bootstrap-table自定义可编辑每页显示记录数

写在前面：

　　最近在做的person功能，由于后期系统中person人数较多，不利用查找person,故需求方将要求可以自己编辑每页显示的数目，而不是固定的写死每页显示的数目。

　　下面先来看下bootsrap-table自带的可切换每页显示记录数的图片

　　其实我感觉自带的这个下拉框选择每页显示的记录数，已经很方便啦，只需要给几个值就可以了，但是为了更加人性化与方便，就要改的呢，初步想的是，直接将此处的下拉框改为一个input输入框就可以了。事实上，最后也是这么做的。

　　下面先大概说一下改造的思路吧。对于改造原有的html页面的显示，肯定是要利用浏览器的调试功能去查看此处的组件的组成；确定了原有的组件代码后，将原有的显示组件移除，拼接自己的html。

　　通过捕获可知，此处的html代码是一个大div,里面包含两个小div,一个为上图左边显示每页记录数的，另一个为右边显示多少页的。那么现在就是要将左边的div获取到，然后移除，并拼接自己的html.

　　原表格左边的html代码图：

　从上图可以看到，可以通过class来获取到此div，故可以使用下面的代码，现将原来的div的内容移除，再append拼接自己的div内容　　　　　　

//自定义可编辑每页显示的记录数
    $("div[class='pull-left pagination-detail']").empty();

    $("div[class='pull-left pagination-detail']").append('<span>Total rows</span>  ');
    $("div[class='pull-left pagination-detail']").append('<span id="totalCount">'+data.total+'</span>;  ');
    $("div[class='pull-left pagination-detail']").append('<input id="pageSize" name="pageSize" value="'+temp+'" style="text-align:center;width:30px"/>  records per page');

　　注意，此段代码不是什么地方都可以放的，由于是在table被加载成功后，才去改变，故此代码可以放在onLoadSuccess方法里。

　　下面是改造后的图：

　　现在页面显示达到想要的效果了，那么如何每次点击查询的时候，去获取到此值，并发送给后台呢？

　　通过查看bootstrap-table.js的源码可以大致得出，params.limit是经过this.options.pageSize计算得来的，右边的总页数也是经过this.options.pageSize计算得来的，那么现在的重点就是如何获取到pageSize属性，然后获取到后，只需要将输入框的值赋值给这个pageSize就可以了。

　　好在皇天不负有心人，经过一个多小时的折磨后，测试出来在jsp页面使用this.pageSize就可以获取到了。hhhh.......(虽然还不是很明白为什么，待会写完就去看看js中this的指向用法)。现在可以给pageSize赋值了，但是页面查询每次刷新后，input输入框也会被刷新还原，那怎么办？

　　这里我做了一个隐藏的标签，用于每次将此值保存，当再次刷新时，再从隐藏的标签中拿值然后赋值给此输入框，显示出来，(由于每次刷新table此输入框也会被刷新，故需要重新赋值)

　　做到这里也就差不多了，一些小细节可以根据自己的项目需求再去实现。下面，还是把主要的代码部门贴上来，以免之后忘记了。。

<div style="height:380px;overflow-y: auto;">
 <%--用于每次给输入框接收或传递值--%>
 <span hidden id="hiddenPageSize">15</span>
 <table id="table"></table>
 </div>

总结

以上所述是小编给大家介绍的Bootstrap-table自定义可编辑每页显示记录数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap可编辑下拉框jquery.editable-select

    bootstrap可编辑下拉框jquery.editable-select

    下载链接地址:链接: https://pan.baidu.com/s/1pLl0uCj 密码: cd59 然后直接请看代码: 引用: <script type="text/javascript" src="${ contextPath }/res/sys/scripts/jquery.editable-select.min.js"></script> <link href="${ contextPath }/res/sys/s

  • Bootstrap Table服务器分页与在线编辑应用总结

    Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据的起止时间,查询一定时间范围的数据.在线编辑功能通过扩展Bootstrap Table实现,使用X-editable实现. Bootstrap Table有两种使用方式: 1.对普通的 table 设置 data 属性: 2.通过JavaScript 来启用 Bootstrap Table 插件.

  • BootStrap 可编辑表Table格

    BootStrap 可编辑表Table格

    一. 显示数据(基础功能) 在html页面中定义表格以及表格的列名,最后把从数据库中查询出来的数据,循环显示到页面中.这个系统用的是PHP语言,里边用到了PHP中的语法,如果是Java语言,把php换成jsp中对应的语法就行 <div class="containe"> <table class="table table-striped table-bordered table-hover"> <thead> <tr cla

  • bootstrap table单元格新增行并编辑

    bootstrap table单元格新增行并编辑

    table单元格新增行并编辑,具体内容如下 需要 bootstrap.min.css -- [ Bootstrap ] jquery-1.8.2.min.js -- [ Jquery ] 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新建HTML</title> <

  • bootstrap table实现单击单元格可编辑功能

    要使bootstrap-table实现可编辑,需要配合使用x-editable插件. 先在页面上导入必要的css和js文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <

  • JS表格组件BootstrapTable行内编辑解决方案x-editable

    JS表格组件BootstrapTable行内编辑解决方案x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的朋友可以移步JS组件系列--表格组件神器:bootstrap table. 一.x-editable组件介绍 x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap.Jquery U

  • bootstrap table实现双击可编辑、添加、删除行功能

    bootstrap table实现双击可编辑、添加、删除行功能

    本文实例为大家分享了bootstrap table双击可编辑的具体代码,供大家参考,具体内容如下 html: <table class="table table-bordered" id="para_table"> <tr> <th style="text-align:center" width="200">名称</th> <th style="text-alig

  • bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

    bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

    前言 最近在研究bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等. 本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化. 由于官网给的demo的数据都是html文件里写好的,select类型的不能动态添加(所以网上的大多都是官网的类似例子,本篇博客就是在这种情况下以自己的经验分享给大家,有问题可以

  • Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

    Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

    最终实现效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animat

  • Bootstrap-table自定义可编辑每页显示记录数

    写在前面: 最近在做的person功能,由于后期系统中person人数较多,不利用查找person,故需求方将要求可以自己编辑每页显示的数目,而不是固定的写死每页显示的数目. 下面先来看下bootsrap-table自带的可切换每页显示记录数的图片 其实我感觉自带的这个下拉框选择每页显示的记录数,已经很方便啦,只需要给几个值就可以了,但是为了更加人性化与方便,就要改的呢,初步想的是,直接将此处的下拉框改为一个input输入框就可以了.事实上,最后也是这么做的. 下面先大概说一下改造的思路吧.对于

  • bootstrap table实现点击翻页功能 可记录上下页选中的行

    bootstrap-table中实现,翻页之后再返回,依然选中的情况,具体内容如下 //var productids = $("body",window.parent.frames[0].document).find('.ptids');//textarea存放数据 var productids = $('textarea'); var merge_order_object= {};//页码+id组成的对象 var jsonObj = {}; var current_page = &q

  • bootstrap table列和表头对不齐的解决方法

    我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐.出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样. 通过Chrome浏览器 f12,看到样式为 .fixed-table-header  .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header  .fixed-table-footer这两个

  • BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）

    BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）

    前言 在使用bootstrap table的时候难免会用到分页,分页它提供了两种方式:client客户端分页.server服务端分页两种方式. 在项目中一般是不用client分页的,一般表格数据量大,用client分页会导致缓存爆炸,所以我们选择server分页. 存在即合理,client也是可以用的(数据量特别少的时候),相对于server方式,它的分页序号是自动连续的.而server方式分页的序号就不连续的了(每一页都是从1开始,而不是从上一页的结束序号开始),本文就着重解决这个问题. 原始

  • Bootstrap Table从服务器加载数据进行显示的实现方法

    Bootstrap Table从服务器加载数据进行显示的实现方法

    Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中.当然,这需要配置一些参数并进行初始化表格才行.其官方网站地址为:http://bootstrap-table.wenzhixin.net.cn/.里面可以下载使用所需的JS和CSS文件,以及参考文档和例子. Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式. 所谓客户端模式,指的是在服务器中把要显示到表格的数据一次性加载出

  • BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题

    主要是页码超出范围带来的问题,仅在此记录一下,这里我通过修改bootstrap-table.js的initServer方法中的查询success回调函数解决,将该回调函数改为: function (res) { /**TODO:2016-12-20新加的代码,处理页码错误问题开始*/ if(res.total!=0&&res.rows.length==0){//总记录数大于0,但当前页记录数为0,则此时页码超过了最大页码误 that.options.pageNumber = Math.ce

随机推荐