带分页的表格插件JSTable

带分页的表格插件JSTable源码下载

看看谁在用

查看文件结构

文件大小:0.03M

资源分类: 插件-其它前端代码

更新时间: 2021-04-08

JSTable是一个灵活的、强大的动态表格插件,HTML表互动与排序、过滤和分页功能。灵感来自Vanilla-DataTables和datatable jQuery插件。

基础调用
new JSTable("#example");
可以加载json数据
new JSTable("#example", {
      serverSide: true,
      deferLoading: 1000,
      ajax: 'data.json', 
      ajaxParams: {
        // ajax params here
      }
    }
);
指定每页多少行数据
new JSTable("#example", {
    perPage: 5,
    perPageSelect: [5, 10, 15, 20, 25]
});
自定义分页控制
new JSTable("#example", {
    nextPrev: true,
    firstLast: false,
    prevText: "‹",
    nextText: "›",
    firstText: "«",
    lastText: "»",
    ellipsisText: "…",
    truncatePager: true,
    pagerDelta: 2,
});
控制搜索框
new JSTable("#example", {
    searchable: false
});
是否排序
new JSTable("#example", {
    sortable: false
});
重写Class
new JSTable("#example", {
    top: "dt-top",
    info: "dt-info",
    input: "dt-input",
    table: "dt-table",
    bottom: "dt-bottom",
    search: "dt-search",
    sorter: "dt-sorter",
    wrapper: "dt-wrapper",
    dropdown: "dt-dropdown",
    ellipsis: "dt-ellipsis",
    selector: "dt-selector",
    container: "dt-container",
    pagination: "dt-pagination",
    loading: "dt-loading",
    message: "dt-message"
});
自定义显示的文字
new JSTable("#example", {
    labels: {
      placeholder: "Search...",
      perPage: "{select} entries per page",
      noRows: "No entries found",
      info: "Showing {start} to {end} of {rows} entries",
      loading: "Loading...",
      infoFiltered: "Showing {start} to {end} of {rows} entries (filtered from {rowsTotal} entries)"
    },
});
一些事件处理
const myTable = new JSTable("#example");

myTable.on("init", function () {
  // on init
});    
                   
myTable.on("update", function () {
  // when the data is updated
});    
                                
myTable.on("getData", function (dataRows) {
  // when the data is processed
});     
                  
myTable.on("fetchData", function (serverData) {
  // when the data is fetched from the server
});    
                    
myTable.on("search", function (query) {
  // after filtering
});   
                     
myTable.on("sort", function (column, direction) {
  // after the data is sorted
});   
                    
myTable.on("paginate", function (old_page, new_page) {
  console.log(old_page);
  console.log(new_page);
}); 
                      
myTable.on("perPageChange", function (old_value, new_value) {
  console.log(old_value);
  console.log(new_value);
});

带分页的表格插件JSTable

正在加载文件目录...

也许你还喜欢

  1. Layui表格动态数据table分页插件
  2. jQuery表格table数据修改删除
  3. systable.js动态数据表格插件
  4. jQuery table插件锁定表头和首列
  5. 可展开列的jQuery表格插件
  6. jQuery自定义表格Table插件
炫酷鼠标划过图片散开css特效
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2