tabulator.js表格分页查询

之前使用bootstrap table比较多，第一次使用tabulator，查了官方文档，一点一点debugger才整出来分页，记录一下。

使用的tabulator.js是 v3.5.1
html文件:

  <div id="demoTable"></div>

js文件：

("#demoTable").tabulator({pagination:"remote", //enable remote paginationajaxConfig: "POST", //ajax request typeajaxURL:_ctx + '/view/getList', //set url for ajax requestajaxResponse:function(url, params, response){//url - the URL of the request//params - the parameters passed with the request//response - the JSON object returned in the body of the response.var data = {list:response};return data; //return the tableData property of a response json object},paginationSize:5, //optional paramter to request a certain number of rows per pageheight : "100%",layout : "fitColumns",columnVertAlign : "bottom",tooltips : true,selectable : 1,movableColumns : false,columns : [{title : "序号",field : "id",formatter : "rownum", width: 70, frozen : false,align : "center", headerSort : false,tooltipsHeader : false,tooltip : false},{title : "名称 ",field : "name",sorter : "string",align : "center",editor : false,headerSort : false}],langs:{"ch-ch":{"pagination":{"first":"<<",// "first_title":"<","last":">>",// "last_title":">","prev":"<",// "prev_title":"<","next":">",// "next_title":">",},},},});$("#demoTable").tabulator("setLocale", "ch-ch");

java文件返回格式：

 Map result = new HashMap();
result.put("data",列表数据);
result.put("last_page",总页数);

分页栏展示效果如下图所示：

总体上来说，样式有点丑，官方文档还是英文的，网上的资料也不多，没有bootstrap使用起来方便。

tabulator.js表格分页查询相关推荐

JS表格分页(封装版)
HTML代码: <html> <head><meta charset='utf-8'> <script type="text/javascript& ...
Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
在做管理后台功能时,经常需要用到表格展示数据,从数据库查询返回的数据,返回集合或数组到前台,然后前台将数据渲染成表格,方便直观展示数据,通常还需要结合分页.查询.排序.Datatables是一款符合上 ...
vue 表格中有列需要异步加载_vue.js表格分页，ajax异步加载数据
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('p ...
MyBatis_Plus联表分页查询
MyBatis_Plus联表分页查询当我们需要关联表格分页查询时,MyBatis_plus封装的单表方法已经满足不了我们的需求了,那么我们需要进行联表分页查询假设我们需要的 SQL 语句如下: S ...
java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...
原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页
最终效果如下: 翻页后首先把bootstrap-table.js和bootstrap-table.css下载下来. 把英文改成中文,如下: 把需要用表格的页面在 </body>前加入此J ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...

tabulator.js表格分页查询

tabulator.js表格分页查询相关推荐

最新文章

热门文章