Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



DataTable前端交互整合(四)

2017-12-29 » Javascript / DataTable , jQuery , Tutorial

查看完整源码示例

当前也有许多 Data Table 的 Plugins & Components,这一系列教程适用于一年左右经验或者对前端交互不太熟悉的朋友。

第一篇 介绍了分页的代码构建思想以及当前页传参时的注意事项;

第二篇 介绍了如何使用模板引擎去渲染分页数据;

第三篇 介绍了如何获取筛选条件,并将它们融入分页数据请求中。

你可以在此基础上:

1. 增加筛选条件的判断,如非空判断、日期起止时间校验、数据格式校验等;

2. 优化 AJAX 请求中的 Loading Bar 展示;

3. 增加“空”数据的判断及相应的用户反馈;

4. 更深入的了解 pagination、datepicker、tmplate 等常用的后台 CMS Plugins & Components 的使用;

源码示例说明:

1. 由于项目没有涉及到服务端的实现,我将 Json 数据保存在的 rows.json & list.json 中。前端使用 $.getJson() 去获取数据,实际的交互中,你应该使用 $.get() 或 $.post() 或 $.ajax() ,这取决你服务端的 API 要求。 

2. 由于交互基于 AJAX 请求,你需要在本地配置一个服务器环境。可以使用 Apache 或 Tomcat 等。如果你本地已装有 Node.js & Npm,你可以使用 npm install http-server -g ,它将会在全局安装一个 http-server 的 node package。安装之后,只需要一行命令即可使用本地服务器让项目运行起来。

http-server -a 127.0.0.1 -p 8080

在浏览器中访问 127.0.0.1:8080 即可,这是它的详细说明:http-server

3. lib 目录下为所需要的全部 Plugins 源码。包含了 BootstrapjQueryjquery-paginationjquery-tmplbootstrap-datepickerdaterangepicker。 

展开选填信息