dataTables使用ajax请求显示数据
dataTables是一种很好用前端表格显示库。当加载大量数据时,可以用Ajax 获取数据来提高效率,增速网页加载速率。下面以一个例子作示范。
首先,需要下载jQuery以及dataTables库。这里使用的是版本是jquery v1.11.3和DataTables 1.10.9。下载网址:http://datatables.NET/。
先上网页的代码。要注意的是,table中的thead和tbody必须要有。
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <head>
- <link href="http://www.zhuhaihengxin.com/libs/datatables/1.10.0/css/jquery.dataTables.css" rel="stylesheet">
- <title>dataTable example</title>
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jquery.dataTables.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#datatable").dataTable({
- "processing" : true,
- "serverSide" : true,
- "paginationType":"full_numbers",
- "ajax" : "load",
- "columns" : [
- {"data" : "id"},
- {"data" : "firstName"},
- {"data" : "lastName"}
- ]
- });
- });
- </script>
- <style>
- h2{
- text-align:center;
- }
- div {
- float: left;
- margin: 10px;
- padding: 4px;
- }
- a{
- margin:5px;
- }
- table,tr,td,th{
- border:2px solid #3aec7b;
- border-collapse:collapse;
- }
- </style>
- </head>
- <body>
- <TABLE id="datatable">
- <THEAD>
- <tr>
- <th>ID</th>
- <th>First Name</th>
- <th>Last Name</th>
- </tr>
- </THEAD>
- <tbody>
- </tbody>
- </TABLE>
- </body>
- </html>
当网页加载的时候,ajax发出请求,如下所示。
- draw=[1]
- columns[0][data]=[id]
- columns[0][name]=[]
- columns[0][searchable]=[true]
- columns[0][orderable]=[false]
- columns[0][search][value]=[]
- columns[0][search][regex]=[false]
- columns[1][data]=[firstName]
- columns[1][name]=[]
- columns[1][searchable]=[true]
- columns[1][orderable]=[true]
- columns[1][search][value]=[]
- columns[1][search][regex]=[false]
- columns[2][data]=[lastName]
- columns[2][name]=[]
- columns[2][searchable]=[true]
- columns[2][orderable]=[true]
- columns[2][search][value]=[]
- columns[2][search][regex]=[false]
- order[0][column]=[0]
- order[0][dir]=[asc]
- start=[0]
- length=[10]
- search[value]=[]
- search[regex]=[false]
- _=[1441278114568]
其中,draw是请求的序号,start是数据的偏移量,length是需要返回的最大数据条数。search[value]是查找的值。
服务端采用Java的servlet完成。为简单起见,这里直接采用继承HttpServlet的方式实现。数据本应该从数据库中提取,但这里为了简单,生成了静态数据集合作为数据源。每次请求都从集合中查找匹配的数据,然后转换成JSON返回。JSON库采用阿里的fastjson。
代码如下所示。
- package jspTest;
- import java.io.IOException;
- import java.util.ArrayList;
- import java.util.Arrays;
- import java.util.Enumeration;
- import java.util.LinkedList;
- import java.util.Random;
- import javax.servlet.ServletException;
- import javax.servlet.annotation.WebServlet;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import com.alibaba.fastjson.JSON;
- import com.alibaba.fastjson.JSONObject;
- import java.util.List;
- import java.util.Map;
- /**
- * Servlet implementation class DataLoad
- */
- public class DataLoad extends HttpServlet {
- private static final long serialVersionUID = 1L;
- static class Person {
- private long id;
- private String firstName;
- private String lastName;
- public long getId() {
- return id;
- }
- public void setId(long id) {
- this.id = id;
- }
- public String getFirstName() {
- return firstName;
- }
- public void setFirstName(String firstName) {
- this.firstName = firstName;
- }
- public String getLastName() {
- return lastName;
- }
- public void setLastName(String lastName) {
- this.lastName = lastName;
- }
- public boolean match(String pattern) {
- return firstName.contains(pattern) || lastName.contains(pattern) || Long.toString(id).contains(pattern);
- }
- }
- private static Random r = new Random();
- private static List<Person> ps = new ArrayList<Person>();
- static {
- int size = 2512;
- for (int k = 0; k < size; ++k)
- ps.add(generatePerson());
- }
- static Person generatePerson() {
- Person p = new Person();
- p.setId(ps.size() + 1);
- p.setFirstName(generateName());
- p.setLastName(generateName());
- return p;
- }
- private static String generateName() {
- StringBuilder sb = new StringBuilder();
- sb.append((char) (r.nextInt(26) + 'A'));
- int len = 2 + r.nextInt(4);
- for (int k = 0; k < len; ++k)
- sb.append((char) (r.nextInt(26) + 'a'));
- return sb.toString();
- }
- private List<Person>result;
- public List<Person>getResult(){
- return result;
- }
- /**
- * @see HttpServlet#HttpServlet()
- */
- public DataLoad() {
- super();
- }
- /**
- * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
- * response)
- */
- protected void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- int start=0;
- int length=10;
- String pattern="";
- String draw="1";
- Map<String,String[]>params=request.getParameterMap();
- for(String attr:params.keySet()){
- String[] val=params.get(attr);
- System.out.println(attr+"="+Arrays.toString(val));
- if(attr.equals("start"))
- start=Integer.parseInt(val[0]);
- if(attr.equals("length"))
- length=Integer.parseInt(val[0]);
- if(attr.equals("search[value]"))
- pattern=val[0];
- if(attr.equals("draw"))
- draw=val[0];
- }
- int total=filter(start, length, pattern);
- JSONObject obj = new JSONObject();
- obj.put("draw", draw);
- obj.put("recordsTotal", ps.size());
- obj.put("recordsFiltered", total);
- System.out.println(obj.toJSONString());
- obj.put("data", result);
- response.getWriter().println(obj.toJSONString());
- }
- /**
- * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
- * response)
- */
- protected void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- doGet(request, response);
- }
- private int filter(int start,int length,String pattern){
- result=new LinkedList<Person>();
- int total=0;
- for(Person s:ps){
- if(!s.match(pattern))
- continue;
- ++total;
- if(start-->0)
- continue;
- if(length--<=0)
- continue;
- result.add(s);
- }
- return total;
- }
- public static void main(String[] rags) {
- System.out.println(JSON.toJSONString(ps));
- DataLoad load=new DataLoad();
- load.filter(0, 10, "");
- System.out.println(JSON.toJSONString(load.getResult()));
- load.filter(0, 10, "a");
- System.out.println(JSON.toJSONString(load.getResult()));
- load.filter(10, 10, "a");
- System.out.println(JSON.toJSONString(load.getResult()));
- load.filter(20, 10, "a");
- System.out.println(JSON.toJSONString(load.getResult()));
- }
- }
服务端返回的JSON数据如下所示。其中draw是请求中的draw参数,data是表格中的数据。recordsFiltered是过滤后的数据总数,recordsTotal是原始数据总数。
- {"recordsFiltered":2512,
- "data":[{"firstName":"Bzf","id":1,"lastName":"Hazkm"},{"firstName":"Imxi","id":2,"lastName":"Oieb"},{"firstName":"Glyag","id":3,"lastName":"Gvqlf"},{"firstName":"Lwbhl","id":4,"lastName":"Fvvf"},{"firstName":"Audds","id":5,"lastName":"Seunp"},{"firstName":"Otbrq","id":6,"lastName":"Hnal"},{"firstName":"Loji","id":7,"lastName":"Qicn"},{"firstName":"Rjy","id":8,"lastName":"Emrygr"},{"firstName":"Gcglkd","id":9,"lastName":"Ldgrs"},{"firstName":"Txh","id":10,"lastName":"Qwe"}],
- "draw":"1",
- "recordsTotal":2512}
返回数据后,网页如下所示。
dataTables使用ajax请求显示数据的更多相关文章
- Ajax请求后台数据
一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...
- ajax请求返回数据,模板中的数据处理
/*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开 ...
- 关于使用Ajax请求json数据,@RequestMapping返回中文乱码的几种解决办法
一.问题描述: 使用ajax请求json数据的时候,无论如何返回的响应编码都是ISO-8859-1类型,因为统一都是utf-8编码,导致出现返回结果中文乱码情况. $.ajax({ type:&quo ...
- 前台返回json数据的常用方式+常用的AJAX请求后台数据方式
我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...
- JS 操作 HTML 和 AJAX 请求后台数据
为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- 关于前端ajax请求获取数据成功之后无法操作数据的原因及解决方法
前言:做项目的时候我用ajax请求json数据,遍历使用数据时却发现页面无响应.关于这个问题今天有个朋友又问了我一次,记录一下.由于我没有记录,这里用我朋友的图片. 代码现象: 这里他是使用alert ...
- bootstrap通过ajax请求JSON数据后填充到模态框
1. JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...
- AJAX请求提交数据
1,AJAX准备知识:JSON JSON指的是JavaScript对象表示方法(JavaScript Object Notation) JSON是轻量级的文本数据交换格式 JSON独立于语言 JSON ...
随机推荐
- VS快速生成JSON数据类
1.复制Json数据 2.
- linux新建文件和文件夹命令
1.touch命令 touch命令用来修改文件的访问时间.修改时间.如果没有指定时间,则将文件时间属性改为当前时间. 当指定文件不存在,touch命令变为创建该文件. 语法: touch [-acm] ...
- 怎么样获得泛型T的Class对象?
public class GenClass<T> { private Class<T> entityClass; } public class Test { public st ...
- EasyDarwin开源流媒体服务器支持basic基本认证和digest摘要认证解析
本文转自EasyDarwin开源团队成员ss的博客:http://blog.csdn.net/ss00_2012/article/details/52262621 RTSP认证作为RTSP标准协议的一 ...
- bootstrap-table 行内编辑
1.文件引入 <link rel="stylesheet" href="bootstrap.css"> <link rel="sty ...
- 九度OJ 1119:Integer Inquiry(整数相加) (大数运算)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:679 解决:357 题目描述: One of the first users of BIT's new supercomputer was ...
- java object monitor
1 什么是java object monitor 每个java对象头中都有锁状态位标记.java中在使用synchronize同步的时候,肯定是涉及到某个对象的锁.因此,在考虑同步的时候,首先要想到是 ...
- Understanding Unicorn and unicorn-worker-killer Unicorn
We just wrote some new documentation on how Gitlab uses Unicorn and unicorn-worker-killer, available ...
- mysql分页查询-limit
分页查询的sql: select * from table limit 4,10; 4表示查询的索引,索引是从0开始,4表示从第五条数据开始查询,10表示要查询多少条数据,10表示查询十条数据 如果从 ...
- RNN 的入门程序DEMO
1.视频介绍 https://www.youtube.com/watch?v=cdLUzrjnlr4 2. https://github.com/llSourcell/recurrent_neural ...