当系统数据量很大时,前端的分页、异步获取方式就成了较好的解决方案。一直以来,我都希望使用自己开发的 jquery 插件做系统。

  现在,学习了 jquery 插件开发之后,渐渐地也自己去尝试着开发一些简单的插件,之前已经开发了手风琴、选项卡,今天和大家介绍一下这个 datatable 分页表格插件。

  我们先讲解使用,再分析插件的实现方式。

  手册地址:http://5ijy01.duapp.com/jq-ui/index.html?tab=tab12

1、引入jquery库和插件库、css文件

首先需要引入 jquery 库,因为我们的 datatable 插件依赖另外一个分页插件,所有需要先把这个分页插件库引入进来,最后再引入 datatable 插件的 js 和 css 文件

 <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>

 <script type="text/javascript" src="js/pagination.js"></script>
<link rel="stylesheet" href="css/blue/pagination.css"/> <script type="text/javascript" src="js/datatable.js"></script>
<link rel="stylesheet" href="css/blue/datatable.css"/>

2、插件使用

下面我们就介绍下插件如何使用。

首先,我们需要写一个 table 标签,其实,最主要的代码就只有第 5 行的 table 标签,前面的几个 button 是为了看插件交互的。

 <button class="default-button" onclick="update();">修 改</button>
<button class="default-button" onclick="del();">删 除</button>
<button class="default-button" onclick="reload();">刷 新</button> <table id="first-datatable"></table>

然后,我们需要写一段 script 脚本来初始化 datatable 组件,以及加载首页数据。

 $("#first-datatable").datatable({
width: "1000",
height: "auto",
columns: [
{ field: "id", columnName: "编号", css: { "text-align": "center" } },
{ field: "username", columnName: "用户名" },
{ field: "age", columnName: "年龄" },
{ field: "phone", columnName: "联系电话", css: { "text-align": "center" } },
{ field: "email", columnName: "邮箱" },
{ field: "description", columnName: "自我介绍" }
],
url: "/jq-ui/ajax/admin_json.jsp",
pageNum: 1, // 显示第几页数据,默认1
pageSize: 15, // 每页数据数量,默认10
pagination: true, // 是否启用分页组件,默认启用
showCheckbox: true
});

我们简单介绍一下参数:

  width:  是包裹 table 标签的 div 的宽度,您可以不设置这个参数的值,默认使用的 100% 即父元素的宽度

  height:     是包裹 table 标签的 div 的高度,默认 auto

  columns:  是一个 object[] 对象,定义 table 的列信息,包括列名、字段的 key、css样式

  url:           获取异步数据的远程地址

  pageNum:初始化时显示第几页数据

  pageSize:每页显示多少数据

  pagination:是否启用分页组件

  showCheckbox:是否显示行首的复选框,这个参数在需要进行数据选择时使用

后台代码就不在这个介绍了,如果需要可以去下载插件项目代码。后台返回一个 json 数据,应该包括最大页数、数据集合信息,如下:

  

现在,可以看到插件的效果了:

  

3、插件的实现方式和核心函数

插件初始化时首先生成 thead 和 表头,然后在 table 外面包裹一个 div , 然后通过参数配置的 url 参数获取数据,加载到 table 的 tbody 中。在这个过程中,会通过参数判断是否显示行首的复选框和分页组件。分页插件我们不做重点介绍,datatable 插件中的代码如下:

 if(options["pagination"]) {
// 先把之前的分页组件删除
$datatable.parent().find(".pagination").remove();
// 定义一个div用于显示分页组件
var $pagination = $("<div></div>").css("margin-top", "10px");
// 初始化分页组件
$pagination.pagination({
pageNum: options["pageNum"],
size: options["pageSize"],
total: data["totalPage"],
click: function(curr, s) {
options["pageNum"] = curr;
$.data(this, "datatable", options);
loadData($datatable);
return data["totalPage"];
}
});
// 把分页组件追加到datatable组件
$datatable.parent().append($pagination);
}

为了方便用户获取数据、刷新表格,插件提供了两个函数:

  

4、刷新、获取

下面我们简单介绍下如何使用 reload 和 getSelectRows 函数

删除按钮的事件函数:

 /*
* 删除函数
*/
function del(tid) {
var rows = $("#" + tid).datatable("getSelectRows");
if(rows.length < 1) {
alert("请至少选择一条数据");
return;
}
var ids = new Array();
for(var i = 0; i < rows.length; i++) {
var id = rows[i]["id"];
ids.push(id);
}
console.log(ids);
$.ajax({
type: "post",
dataType: "json",
data: { "ids": ids},
traditional: true,
url: "/jq-ui/ajax/admin_del.jsp",
success: function(data) {
if(data["retCode"] == '0') {
alert("删除成功");
$("#" + tid).datatable("reload");
}
}
});
}

更新按钮的事件函数类似,就不再重复介绍了。

刷新按钮的事件函数:

 /*
* 点击"刷新"后调用datatable的reload函数重新加载数据
*/
function reload(id) {
$("#" + id).datatable("reload");
}

5、项目地址

datatable.js http://5ijy01.duapp.com/jq-ui/js/datatable.js

datatable.css http://5ijy01.duapp.com/jq-ui/css/blue/datatable.css

演示项目在 http://5ijy01.duapp.com/jq-ui/index.html

github项目在 https://github.com/xuguofeng/jq-ui

使用jQuery开发datatable分页表格插件的更多相关文章

  1. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  2. JQuery中的DataTables表格插件

    一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...

  3. bootstrap 分页表格插件

    找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件 使用及简单案例 文档介绍:http: ...

  4. jQuery ajax 实现分页 kkpager插件

    代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href=&qu ...

  5. 使用jQuery开发messager消息框插件

    1.插件使用 首先引入jquery库,然后引入dialog.js.dialog.css.messager.js.messager.css,如下: <script type="text/ ...

  6. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  7. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

  8. 001_ jQuery的表格插件dataTable详解

    一. 1.启用id为"datatable1"标签的html的表格jQuery库 $("#datatable1").dataTable( ) Reference: ...

  9. 前端开发:一个开源、简单易用的jQuery表格插件(DataTables)

    DataTables是一个基于jQuery库的开源(MIT协议)表格插件,支持添加.排序.分页.搜索.过滤等功能,使用简单.广受欢迎,能够与主流前端UI整合(如bootstrap.jQuery UI等 ...

随机推荐

  1. Tkinter 之使用PAGE工具开发GUI界面

    一.安装 1.官网下载 PAGE http://page.sourceforge.net/ Tcl(8.6+) https://www.activestate.com/activetcl/downlo ...

  2. 2019 SDN第五次上机作业

    2019 SDN第五次上机作业 作业链接 1.浏览RYU官网学习RYU控制器的安装和RYU开发入门教程,提交对于教程代 码的理解,包括但不限于: 安装RYU控制器并测试 安装教程 安装过程及遇到各种问 ...

  3. Hotspot研究-工程结构

  4. SpringMVC @SessionAttribute 使用说明

    百度搜索 @SessionAttribute 这一句绝大多数文章中不存在: 如果Model中没有name参数,而session中存在一个name参数,那么SessionAttribute会讲这个参数塞 ...

  5. Laravel 使用自己的类库三种方式

    虽然Composer使得我们可以重用很多现有的类库(例如packagist.org中的),但是我们仍然可能用到一些不兼容composer的包或者类库.另外在某一项目中,我们也可能会创建某一类库,而且可 ...

  6. HUSTOJ搭建后为了方便作为Judger调用进行的一些修改操作

    这里的操作主要包括: 找到初始的MySQL数据库用户名和密码: 将 csrf 设置为固定值: 取消掉同一用户相邻提交时间间隔需要10秒钟的限制. 内容如下: 系统:ubuntu18.04.2 hust ...

  7. [LeetCode] 310. Minimum Height Trees 最小高度树

    For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...

  8. [LeetCode] 774. Minimize Max Distance to Gas Station 最小化加油站间的最大距离

    On a horizontal number line, we have gas stations at positions stations[0], stations[1], ..., statio ...

  9. RSA 系统找不到指定的文件

    未测试 System.Security.Cryptography.RSACryptoServiceProvider rsa = new RSACryptoServiceProvider(); 改为 C ...

  10. 【C/C++开发】C++编译指令#pragma pack的配对使用

    C++编译指令#pragma pack的配对使用 #pragma pack可以用来指定C++数据结构的成员变量的内存对齐数值(可选值为1,2,4,8,16). 本文主要是强调在你的头文件中使用pack ...