文档章节

jQuery Datatable 实用简单实例

huluobotx
 huluobotx
发布于 2015/09/21 16:59
字数 1822
阅读 118
收藏 1

目标:

使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求。同时,jQuery Datatable强大的功能支持:排序,分页,搜索等。

Query Datatable能良好支持数据完全加载到本地后构建数据列表,排序、分页、搜索等功能就会自带,不需要我们去关心,在此主要说明通过后台动态的加载数据,已达到在大数据面前提高效率的效果。

1. 通过后台进行分页

2. 通过后台进行排序

3. 通过后台进行搜索


具体使用方法:

1. 首先构建我们需要的数据列表,以及页面显示表格。

<table id="datatable" width="100%" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Operation</th>
        </tr>
    <thead>
</table>

表格建立很简单,只需用将表格定义好id,以及表头定义好。


2. 我们可以到jQuery Datatable官网上去下载一份jQueryjQuery Datatablejs库。https://datatables.net/examples/server_side/simple.html

wKiom1Nq7d3BrrQmAACVHW5gAbY810.jpg


3. 然后将这两个文件引入到页面文件中,注意jQuery的库一定要在最前面,因为页面加载的有顺序,保证后面的扩展库能使用到jQuery。同时,请下载最新的jQuery Datatable版本,因为它的写法以及参数更加简洁,功能更加多。【注:参数区别会在附录写明】


4. 编写前端代码。我们是要使用Ajax对后台进行请求,因此在配置datatable时,加上{"serverSide": true},已保证页面在加载时就请求后台,以及每次对datatable进行操作时也是请求后台。【附:如果想加上一点加载效果,可以增加{"processing": true}】。

配置请求后台URL{"ajax": "load"}


5. 配置数据返回对应具体的列。在Datatable中,属性columns用来配置具体列的属性,包括对应的数据列名,是否支持搜索,是否显示,是否支持排序等。根据上述页面配置我们具体的列。如下:

$(document).ready(function() {
        $("#datatable").dataTable({
            "processing": true,
            "serverSide": true,
            "ajax" : "load",
            "columns": [
                {"data": "id", "bSortable": false},
                {"data": "firstName"},
                {"data": "lastName"}
            ]
        });
    });

第一列ID,设置为不允许排序。也可以增加不显示:{"visible": false}


6. 此时对于后台而言,返回的数据一定要按照一定规范。如下:

{
    "draw": 2,
    "recordsTotal": 11,
    "recordsFiltered": 11,
    "data": [
        {
            "id": 1,
            "firstName": "Troy",
            "lastName": "Young"
        },
        {
            "id": 2,
            "firstName": "Alice",
            "lastName": "LL"
        },
        {
            "id": 3,
            "firstName": "Larry",
            "lastName": "Bird"
        }
        // ......
    ]
}

参数解释:

draw:表示请求次数

recordsTotal:总记录数

recordsFiltered:过滤后的总记录数

data:具体的数据对象数组


7. 最后一列Operation,我们没有任何数据,用来放我们的通用操作列,如修改链接。 Datatable提供了自定义列columnDefs属性,他的值为数组对象,具体代码如下:

$(document).ready(function() {
        $("#datatable").dataTable({
            "processing": true,
            "serverSide": true,
            "ajax" : "load",
            "columns": [
                {"data": "id", "bSortable": false},
                {"data": "firstName"},
                {"data": "lastName"}
            ],
            "columnDefs": [
                {
                    "targets": [3],
                    "data": "id",
                    "render": function(data, type, full) {
                        return "<a href='/update?id=" + data + "'>Update</a>";
                    }
                }
            ]
        });
    });

targets表示具体需要操作的目标列,下标从0开始

data: 表示我们需要的某一列数据对应的属性名

render:返回需要显示的内容。在此我们可以修改列中样式,增加具体内容

  属性列表:data, 之前属性定义中对应的属性值

                                type未知

    full,    全部数据值可以通过属性列名获取

具体效果图如下:

wKiom1Nq712jvx_1AADkJifD5bc689.jpg


8. 我们再来看具体如何进行搜索、排序、分页。由于只是为了做demo,因此使用最简单的JDBC+Servlet的方式来实现。

首先我们来看,datatable给我们在做请求是传递过来的参数:

=============== Request Paramerters ================
draw: 1
columns[0][data]: id
columns[0][name]:
columns[0][searchable]: true
columns[0][orderable]: true
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
_: 1399345292266
=============== Request Paramerters ================


其中有用的数据就是start, length, order[0][column], order[0][dir], search[value]。具体参数意思:

start: 其实记录位置

length:页面显示数量

order[0][column]: 因为是二维的表格,因此只有一维需要排序,所以order的下标未0. 该属性表示第几列需要排序。

order[0][dir]: 排序方式ASC | DESC

search[value]: search输入框中的值


9. 这几个属性对后台进行排序、搜索、分页很有用。【注:因为是二维表,并且只是对一列进行操作,自然就是一维的,所以order下标始终为1。以后操作二维表有待研究。】

首先来看包含这几个功能的DAO层代码:

/**
     * This method includes the search, sort, pagination
     * @param pageSize
     * @param startRecord
     * @param sortColumn
     * @param sortDir
     * @param searchValue
     * @return
     */
    public List<Data> loadDataList(int pageSize, int startRecord, String sortColumn, String sortDir, String searchValue) {
        List<Data> results = new ArrayList<Data>();
        StringBuffer sql = new StringBuffer("select * from data ");
                             
        // for search
        String[] columnsName = { "id", "firstName", "lastName" };
        boolean searchAble = false;
        if(searchValue != null && !"".equals(searchValue)) {
            sql.append("where ");
            searchAble = true;
        }
                             
        if(searchAble) {
            StringBuffer temp = new StringBuffer();
            for (String column : columnsName) {
                temp.append( column+ " like '%" + searchValue + "%' or ");
            }
            sql.append(temp.substring(0, temp.length() - 3));
        }
                             
        // for order
        sql.append(" order by " + sortColumn + " " + sortDir + " ");
                             
        // for pagination
        sql.append(" limit ?,? ");
        System.out.println(sql.toString());
                             
        try {
            stmt = conn.prepareStatement(sql.toString());
            stmt.setInt(1, startRecord);
            stmt.setInt(2, startRecord + pageSize);
                                 
            ResultSet rs = stmt.executeQuery();
            while(rs.next()) {
                Data data = new Data();
                data.setId(rs.getInt(1));
                data.setFirstName(rs.getString(2));
                data.setLastName(rs.getString(3));
                                     
                results.add(data);
            }
                                 
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
                             
        return results;
    }

DAO层中,统计代码类似,只用把分页和排序的SQL拼接去掉即可。

我们需要将我们的数据转换成JSON返回给前端,并且还要显示总记录数,过滤后总记录数。因此我们需要一个统一的类来将这些数据进行封装。由于在一个系统中不只一个对象需要展示到前端,因此统一的做一个为datatable封装类。

package com.web.vo;
import java.util.List;
/**
 * This VO used to generate the JSON data for data table, so please ensure that the attribute name is correct.
 * If you want to define the fields name by yourself, please visit: https://datatables.net
 * @author troyyang
 *
 * @param <T>
 */
public class DataVO<T> {
    private int draw; // Client request times
    private int recordsTotal; // Total records number without conditions
    private int recordsFiltered; // Total records number with conditions
    private List<T> data; // The data we should display on the page
    // getter and setter method
}

万事具备,只欠前后交互代码。此处使用最简单的servlet

// For pagination
        int pageSize = 10;
        int startRecord = 0;
        String size = request.getParameter("length");
        if (!"".equals(size) && size != null) {
            pageSize = Integer.parseInt(size);
        }
        String currentRecord = request.getParameter("start");
        if (!"".equals(currentRecord) && currentRecord != null) {
            startRecord = Integer.parseInt(currentRecord);
        }
        // For sortable
        String sortOrder = request.getParameter("order[0][column]");
        String sortDir = request.getParameter("order[0][dir]");
        System.out.println("sortOrder: " + sortOrder);
        System.out.println("sortDir: " + sortDir);
                     
        // For search
        String searchValue = request.getParameter("search[value]");
        int count = 0;
        List<Data> results = new ArrayList<Data>();
        count = dao.count();
        results = dao.loadDataList(pageSize, startRecord, columnsName[Integer.parseInt(sortOrder)], sortDir, searchValue);
        DataVO<Data> result = new DataVO<Data>();
        result.setDraw(Integer.parseInt(request.getParameter("draw") == null ? "0"
                : request.getParameter("draw")) + 1);
        result.setData(results);
        result.setRecordsTotal(count);
        result.setRecordsFiltered(count);
        Gson gson = new Gson();
        String output = gson.toJson(result);
        System.out.println("Output JSON: \n" + output);
        PrintWriter out = response.getWriter();
        out.write(output);
        out.flush();
        out.close();

附录:

使用jQuery Datatable1.10之前的版本,必须使用sAjaxSource进行请求,但是请求数据和现在版本的请求数据不同,如下:

=============== Request Paramerters ================
sEcho: 1
iColumns: 4
sColumns: ,,,
iDisplayStart: 0
iDisplayLength: 10
mDataProp_0: id
sSearch_0:
bRegex_0: false
bSearchable_0: true
bSortable_0: false
mDataProp_1: firstName
sSearch_1:
bRegex_1: false
bSearchable_1: true
bSortable_1: true
mDataProp_2: lastName
sSearch_2:
bRegex_2: false
bSearchable_2: true
bSortable_2: true
mDataProp_3: id
sSearch_3:
bRegex_3: false
bSearchable_3: true
bSortable_3: true
sSearch:
bRegex: false
iSortCol_0: 0
sSortDir_0: asc
iSortingCols: 1
_: 1399515247114
=============== Request Paramerters ================

更过特性,持续更新......

本文出自 “SG-YYZ” 博客,请务必保留此出处http://sgyyz.blog.51cto.com/5069360/1408251

本文转载自:http://sgyyz.blog.51cto.com/5069360/1408251?utm_source=tuicool

huluobotx
粉丝 0
博文 26
码字总数 241
作品 0
杭州
程序员
私信 提问
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
63
0
分享 6 个实用的 jQuery 和 CSS 实例及源码

jQuery是一个十分轻巧方便的JS类库,有了这个强大的框架,我们的项目可以简化不少,今天给大家分享6个WEB项目中很可能会用上的jQuery实例及源码,希望大家喜欢。 1、jQuery幻灯片播放插件cov...

yykj
2012/12/07
8.3K
12
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.2K
0
分享16个javascript&jQuery的MVC教程

日期:2011/12/19 来源:GBin1.com 2011即将过去我们将在几周后迎来新的一年。 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢! jQuery MVC 1. AJAX - Spring MVC 3和jQuery的整合 ...

gbin1
2011/12/21
5.7K
5
盘点6个时尚有用的 jQuery 和 CSS3 实例

很久以来,jQuery作为JS框架已经被大部分开发者所认同了,从而也诞生了不少让前端开发者兴奋的插件。然后随着CSS3的兴起,很多jQuery插件也都演变得符合CSS3标准,插件内容也更充实了,页面也...

yykj
2012/12/10
3.8K
6

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部