jquery.datatables 前端分页工具使用

原创 2018年04月17日 20:02:58

jQuery.datatables是一款基于jQuery表格插件。

需求:需要弄个前端分页、前端筛选(自定义)的表格。基本实现功能如下:

这里写图片描述

前端DataTable 静态筛选 基本使用
//  demo 1   ajax 取数据
   var table2 = $('#table_details').DataTable({   // 1
       //排序功能.
       ordering: false,
       processing: true,
       deferRender: true,
       bSortClasses: true,
       info: false,  // 去除多余的自带信息
       //定义初始的页长
       pageLength: 10,
       pagingType: 'full_numbers',  // 分页的样式
       search: true,
       ajax: {    //  2
           url: url, // 请求的url  // todo
           type: "get",
           dataSrc: function (result) {
                // 接口回来的数据  这里可以对部分后台数据进行处理,也可加入dom
                //  result.data[i].f_income = "<a href='javascript:;' class='fail' > - " + result.data[i].Value + " </a>";
               return result.data;
           },
       },
       columns: [   //  3
           {data: "no"},
           {data: "Age"},
           {data: "TxHash"},
           {data: "INOUT"},
           {data: "f_moneyType"},
           {data: "f_income"},
           {data: "TxFee"},
           {data: "balance"},
       ]
   });

    setTimeout(function(){
        table2.ajax.reload();    //4  更新表格数据
    },4000)

      setTimeout(function () {  //  5  根据字段筛选,排序
         table2.search( 'withdraw' ,false ,false ).draw();
     },5000)

1、 table_details 对应的 html 中table dom 元素
2、ajax 获取全部的后台数据 ,其中url 即时对应的dom url。
3、columns 数组对应表格的每一列数据字段 no 、age 等即是result.data 中对应的字段。
4、实例.ajax.reload() 实现接口数据的更新。
5、按withdraw 的字段进行筛选、排序。

前端自逻辑筛选 最、最、最重要的一点。
 $.fn.dataTable.ext.search = [];  //  初始化
 if (table2_sel_dayVal !== 0) {
     $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
         if (data && data[1]) {
             var currTimeSearch = new Date(data[1]).getTime();
             var currTimeDel = ( new Date().getTime() ) - ( table2_sel_dayVal * 24 * 3600 * 1000 );
             if (currTimeSearch > currTimeDel) {
                 return true;
             }
         }
         return false;
     });
 } else {
     $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
         return true;
     });
 }
 table2.search(table2_sel_betVal, false, false).draw();

利用 $.fn.dataTable.ext.search 进行自己逻辑处理,可以理解为 筛选数组 的形式,进而实现表格的前台筛选。

参考相关文档

datatables中文网
datatables官网
更为详细博文

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010427666/article/details/79979376

用jquery datatables实现页面分页,前端分页,后端分页

这两天搞了点网页上的分页,真的是搞得欲仙欲死,现在也只能说是搞了个入门的水平吧,现在就来写下这几天的收获。      用的是datatables的框架,先来个框架的地址:https://datata...
  • yuanhangLVli
  • yuanhangLVli
  • 2016-11-25 19:50:26
  • 7855

asp.net mvc 中利用jquery datatables 实现数据分页显示

1、Controller中的方法代码如下:由于方法中的存储过程没有带分页参数,所以还可以有继续优化的空间。 /// /// 获取测点列表 /// ...
  • taomanman
  • taomanman
  • 2017-06-22 17:13:36
  • 863

仿jquery.dataTables的分页(查询+排序)

  • 2015年08月14日 16:22
  • 19KB
  • 下载

Datatables学习之前端分页

datatables前端分页实现
  • angelvyvyan
  • angelvyvyan
  • 2016-06-29 15:06:35
  • 6861

DataTables分页和pageHelper分页

对于绝大部分的项目而言,都需要查询出列表;而便于浏览和操作,分页是每个项目中必不可少的功能之一 在这里整理两个分页的插件 DataTables(js分页)和pageHelper分页 可以在这两个链接...
  • Artoro
  • Artoro
  • 2018-01-05 16:04:05
  • 110

datatables服务器端分页查询

本文是jqueryspring(3.0)系列的第三篇。 原文地址:http://blog.csdn.net/hy840429/article/details/5626878 jquery与yu...
  • u013654037
  • u013654037
  • 2015-12-11 09:41:12
  • 8044

[jQuery]jQuery DataTables插件自定义Ajax分页实现

前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢。 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分...
  • SeayXu
  • SeayXu
  • 2016-06-03 17:32:40
  • 970

Jquery dataTables api 配置笔记

一、详细配置: var docrTable = $('#docrevisontable').dataTable({ "bProcessing" : true, //DataT...
  • zhulongxi
  • zhulongxi
  • 2016-08-24 16:31:09
  • 3774

datatables pagehelper分页问题

注意 lengthMenu: [100],, 设置每页显示数据(默认是10)$('#dataTables-receiveMsg').DataTable({ processing: true, ...
  • evane1890
  • evane1890
  • 2017-03-19 17:57:26
  • 1259

前端分页和后端分页

前端分页和后端分页区别
  • baidongying
  • baidongying
  • 2017-07-19 20:04:28
  • 1601
收藏助手
不良信息举报
您举报文章:jquery.datatables 前端分页工具使用
举报原因:
原因补充:

(最多只允许输入30个字)