bootstrap java 分页_Bootstrap3的paginator分页插件示例

最近在弄这个,自己做的范例,所以分享下,也记录下心得。

首先要下载Bootstrap Paginator了,github上便有这个的开源项目提供下载:

下载的时候要注意里面的结构,其中有2个版本的bootstrap,下载后可以去找后缀“3v”的js文件和样式。

jquery版本要1.8以上,其实官方文档中这样写,我也没试过。

主要操作:2个jsp页面,一个后台类,测试数据表自己新建。

PageTest.jsp:

然后要引入需要的js和css:

//ajax获取后台数据

function initTable() {

var tbody="";

$.ajax({

type: 'POST',

dataType : "json",

async:false,

url: "table.jsp",//请求的action路径页面

data: {"flag":true},

error: function () {//请求失败处理函数

alert('请求失败');

},

success:function(data){ //请求成功后处理函数。

tbody="

设备标识号设备类别参数编码失效模式编码数据来源";

$.each(data.list, function(i, n) {

var trs = "";

trs += "

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Treetable 不支持自带分页功能,但可以与其他分页件结合使用。以下是一个示例: 1. 首先,在 HTML 页面中引入 Bootstrap Treetable 和分页件的 CSS 和 JS 文件。 ``` <!-- Bootstrap Treetable --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-treetable/1.2.0/bootstrap-treetable.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-treetable/1.2.0/bootstrap-treetable.min.js"></script> <!-- 分页件(这里以 bootstrap-paginator 为例) --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-paginator/2.2.5/bootstrap-paginator.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-paginator/2.2.5/bootstrap-paginator.min.js"></script> ``` 2. 在 HTML 页面中创建一个表格容器,并初始化 Bootstrap Treetable。 ``` <div id="table-container"></div> <script> $(function() { $('#table-container').bootstrapTreeTable({ // 配置项 }); }); </script> ``` 3. 在初始化的回调函数中,使用分页件对数据进行分页,并更新表格数据。 ``` $(function() { $('#table-container').bootstrapTreeTable({ // 配置项 onInit: function(data) { // 分页件配置 var options = { // 分页参数 currentPage: 1, totalPages: Math.ceil(data.total / data.pageSize), size: 'normal', alignment: 'center', onPageClicked: function(e, originalEvent, type, page) { // 分页回调函数 $.ajax({ url: '/api/data', dataType: 'json', data: { page: page, pageSize: data.pageSize }, success: function(data) { // 更新表格数据 $('#table-container').bootstrapTreeTable('load', data); } }); } }; // 初始化分页件 $('#paginator').bootstrapPaginator(options); } }); }); ``` 以上是一个简单的 Bootstrap Treetable 分页示例,你可以根据自己的具体需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值