文档章节

j2ee 简单网站搭建:(九)jquery datatables + jquery ui dialog 插件使用入门

b
 binux
发布于 2017/08/29 18:16
字数 2567
阅读 36
收藏 0
点赞 0
评论 0

《j2ee 简单网站搭建:(一) windows 操作系统下使用 eclipse 建立 maven web 项目》
《j2ee 简单网站搭建:(二)添加和配置 spring + spring-mvc 的 mvc 开发环境》
《j2ee 简单网站搭建:(三)在搭建好的 spring maven web 项目中加入 mybatis 访问数据库》
《j2ee 简单网站搭建:(四)将 freemaker 模板引擎作为 spring-mvc 展现层》
《j2ee 简单网站搭建:(五)使用 jcaptcha 生成验证码图片》
《j2ee 简单网站搭建:(六)使用 hibernate validation 实现 domain 层实体类验证》
《j2ee 简单网站搭建:(七)使用 shiro 结合 jcaptcha 实现用户验证登录》
《j2ee 简单网站搭建:(八)使用 jquery-validate 实现页面验证入门》
《j2ee 简单网站搭建:(九)jquery datatables + jquery ui dialog 插件使用入门》
《j2ee 简单网站搭建:(十)jquery ztree 插件使用入门》
《j2ee 简单网站搭建:(十一)ckeditor 控件使用入门》

jquery datatables 版本 1.10.15,官方下载网站 https://www.datatables.net/

jquery datatables 的使用主要有以下几个步骤
1 将 datatables 官方的压缩包解压并配置到网站中
2 在网页中添加 datatables 需要的基本 css 文件和 javascrpt 文件 (包括对 jquery 核心文件的引用)
3 为页面中需要调用 datatables 的 table 插件在页面最下方 </body> 标签内编写 jquery 代码让 table 绑定插件并进行初始化设置,在初始化时比较重要的参数包括:
    1) 每页数据条数:pageLength
    2) 是否启动服务端提供 ajax 数据:serverSide
    3) 通过 ajax 方式从服务器端获得数据:ajax
    4) 每行行号:rowId
    5) 每列同 ajax 中列数据的对应关系:columns
4 处理翻页和查询方法

jquery ui dialog 的使用主要步骤有:
1 在 jquery 官方下载和引用 ui 库
2 对需要作为弹出框的 div 标签使用 dialog 插件
3 初始化dialog,主要的设置包括
    1) 设置是否自动显示弹出框 autoOpen
    2) 设置是否启动模态窗口 modal
    3) 设置弹出框的按钮和按钮绑定的处理方法 buttons
    
本例通过在一个页面中实现服务器端提供 ajax 数据、列表数据展现、数据全选和取消、单条数据修改、数据翻页为例将两个插件结合使用
一 在页面中加入对 datatables 和 jquery ui dialog 的 css 、 javascrpt 文件引用
1 在文件 <head> 标签下添加 css 文件

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="你的文件位置/jquery.dataTables.css">
<!-- JQuery UI CSS -->
<link href="你的文件位置/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link href="你的文件位置/jquery-ui.structure.min.css" rel="stylesheet" type="text/css">
<link href="你的文件位置/jquery-ui.theme.min.css" rel="stylesheet" type="text/css">

2 在文件 </body> 标签前加入对 javascript 文件的引入

<!-- jQuery -->
<script src="你的文件位置/jquery.min.js"></script>
<!-- DataTables JavaScript -->
<script src="你的文件位置/jquery.dataTables.min.js"></script>
<!-- JQuery UI JavaScript -->
<script src="你的文件位置/jquery-ui.min.js"></script>


二 对使用 datatables 插件的 table 标签进行绑定和初始化
假设 html 中 id 为 sampletable 的 table 标签是绑定 dataTables 的表单,整个初始化 javascript 代码放在 jquery 的 $(document).ready(function() {}); 中实现:

table = $('#sampletable').DataTable({ // 初始化表格
    responsive: true, // 开始响应式
    pageLength : 5, // 每页长度
    ordering : false, // 是否支持排序
    searching : false, // 是否显示查询
    lengthChange : false, // 是否显示更改每页显示长度下拉菜单
    language : { // 基本的文字显示内容设置
        decimal :        "",
        emptyTable :     "...数 据 为 空...",
        info :           "当前第 _PAGE_ 页,共 _PAGES_ 页",
        infoEmpty :      "无记录",
        infoFiltered :   "",
        infoPostFix :    "",
        thousands :      ",",
        lengthMenu :     "每页  _MENU_ 条",
        loadingRecords : "数据加载中...",
        processing :     "数据加载中...",
        search :         "查找:",
        zeroRecords :    "没找到任何记录",
        paginate : {
            first :      "首页",
            last :       "尾页",
            next :       "下一页",
            previous :   "上一页"
        },
        aria : {
            sortAscending :  ": 升序排列",
            sortDescending : ": 降序排列"
        }
    },
    processing : true, // 服务器处理时显示处理中(必选项)
    serverSide : true, // 设服务器端处理(必选项)
    ajax : {
        url: "search", // ajax调用地址,附加总记录条数信息,为减少每次翻页都需要向数据库提交查询记录条数的请求,提升执行性能
        type:"POST",
        dataType : "json",
        // 下边一行代码是对服务器端传来的数据进行加工
        // 这里千万注意,不要写成 data: {recordsTotal: $('#ipt_records_total').val()},这样传递的是第一次页面加载的时候控件的静态值,之后怎么设置控件的值,取值都是第一次的,需要写出函数的方式才能取到变化后的值
        // 代码逻辑中 d.recordsTotal = $('#ipt_records_total').val() 是在页面中增加了一个保存所有数据的记录数的控件 ipt_records_total,每次刷新页面的时候让该控件向 datatables 赋值,服务器端如果不是重新查询或者第一次加载页面,控件的值不变,这样就不会每次翻页导致在数据库中 sum 以便记录数,提升效率
        // 方法中的 d 包含 datatables 原本传输的数据,在方法中如果想处理服务器端传来的数据,必须定义和使用这个参数,服务器端传递的所有数据属性都可以通过这个参数获得
        data: function (d) {d.recordsTotal = $('#ipt_records_total').val();} // 
    },
    rowId : "id", // 设置行id,用于修改、删除时传值
    columns : [ // 设置每列的数据和显示内容
        {render : function(data, type, full, meta) {return meta.settings._iDisplayStart + meta.row + 1;}, width : "5%"}, // 第一列使用方法返回列内容,其中 render 后跟的就是方法; meta.settings._iDisplayStart 是 datatables 插件默认的当前页面的起始数据索引,比如现在是第2也,起始数据索引就是 19;meta.row 是当前行的行号
        {render : function(data, type, full, meta) {return '<input type="checkbox" onclick="fnCheckBoxCheckUp(this)">';}, width : "5%"}, // 第二列是单选按钮列,onclick 中的 fnCheckBoxCheckUp 方法判断是否将全选按钮选中或取消选中
        {data : "ajax json 数据中的列", width : "25%"}, // 
        {data : "ajax json 数据中的列", width : "25%"},
        {data : "ajax json 数据中的列", width : "10%", render : function(data, type, full, meta) {return data == "1" ? "启用" : "停用";}}, // 本列如果数据是 1 显示启用,如果数据是 0 显示停用
        {data : "id", render : function(data, type, full, meta) {return '<a href="#" onclick="fnAdminInfoModify(' + data + ')">信息修改</a>';}}] // 本列是单条信息修改连接,点击后调用 fnAdminInfoModify 方法调用修改弹出框进行信息修改,
});

$('#sampletable').on( 'draw.dt', function () { // 绑定 sampletable 表格的绘制方法,让全选按钮得到正确设置
    $('#cb_select_all').prop('checked', false); // 设置表格翻页事件 取消全选控件的选择状态
    $('#ipt_records_total').val(table.page.info().recordsTotal); // 保留记录条数,如果记录为0,进行记录条数查询,如果记录不为0,不进行记录查询,提升查询性能,例如在查询条件变换后将 #ipt_records_total的值设置为0,服务器端会重新做最全的查询
});

三 对使用 jquery ui dialog 插件的 div 标签进行初始化,代码放在 jquery 的 $(document).ready(function() {}); 中实现:
以单条数据进行修改的时候弹出修改页面为例,假设页面中 id 为 modifydiv 的 div 标签是弹出框,那么初始化代码如下:

$('#modifydiv').dialog({ // 初始修改弹出框
    autoOpen: false, // 取消自动打开
    modal: true, // 启用模态窗口
    buttons: { // 定义弹出框下边的按钮和按钮需要执行的操作
        "修改" : function() { // 修改按钮操作
            if ($('#ipt_modify_id').val().replace(/(^s*)|(s*$)/g, "").length > 0) { // 保存需要修改的信息的数据id是否为空
                $.post("modify", // 服务器端修改方法
                    {id: $('#ipt_modify_id').val(), email: $('#ipt_modify_email').val(), phone: $('#ipt_modify_phone').val()}, // 向服务器传递的数据
                    function (result) { // 调用返回的结果进行处理
                        if (result != null && result.status == true) {
                            $('#div_alert').text("修改成功!").prop('class', 'alert alert-success'); // 设置提示信息并改变提示框样式为成功
                            $('#ipt_modify_id').val(''); // 修改完成清理数据 id 
                            $("#dt_categorylist").dataTable().fnDraw(false); // 该方法可以在datatables的当前页刷新数据
                        }
                        else $('#div_alert').text("修改失败!").prop('class', 'alert alert-warning'); // 设置提示信息并改变提示框样式为警告
                    }
                );
                $(this).dialog("close");
            }
            else $('#div_alert').text("核心参数丢失,修改失败!").prop('class', 'alert alert-warning');
        }
    }
});

四 为绑定了 datatables 的 table 提供全选和取消全选的代码
1 全选 checkbox 框点击控制表格中所有数据项的选择 checkbox 控件的选择状态

$('#cb_select_all').click(function() {$(':checkbox').prop('checked', this.checked);}); // 初始化全选 checkbox 空间,让所有数据被选择或取消选择


2 表格中每行数据的 checkbox 选择控件点击后判断是否要将页面中的全选 checkbox 控件的状态进行变更,即如果所有数据选中则 全选 checkbox 控件选中,如果有一个没有选择则全选 checkbox 取消选中

function fnCheckBoxCheckUp(checkbox) { // 判断是否全选,控制全选框,该方法在 dataTables 的 columns 属性被绑定时调用
    if ($(checkbox).prop('checked') && ($('#dt_adminlist td :checkbox:checked').length >= table.page.len())) 
        $('#cb_select_all').prop('checked', true);
    else 
        $('#cb_select_all').prop('checked', false);
}


五 服务端处理代码片段

@RequestMapping(value = "/search", produces = "application/json;charset=UTF-8")
public @ResponseBody Map<String, Object> search( // 表格的数据加载和传输方法,翻页功能也在该方法中
        @RequestParam(value = "draw", required = false, defaultValue = "") String draw, // dataTables 插件持有的默认值,该值控制 datatables 的提交是否和服务端返回数据一一对应
        @RequestParam(value = "start", required = false, defaultValue = "0") Integer start, // 当页需要查询数据的起始索引
        @RequestParam(value = "length", required = false, defaultValue = "10") Integer length, // 当页需要查询数据的结束索引
        @RequestParam(value = "search", required = false, defaultValue = "") String search, // 查询关键字
        @RequestParam(value = "recordsTotal", required = false, defaultValue = "0") Integer recordsTotal) { // 总的记录数
        
    int count = 0;
    List<AdminShortListItem> list = null;
    try {
        // 如果传入的保存的记录数为0,则重新查询记录总数,可以减少查询,提升性能,因此在查询条件更改时可以设置前端传入的记录数为0
        if (recordsTotal == 0) count = adminService.getAdminShortListCountBySearchKey(search); 
        else count = recordsTotal;
            list = adminService.getAdminShortListBySearchKey(search, start, length);
    }
    catch (Exception e) {list = null;}
        
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("draw", draw);
    map.put("recordsTotal", count);
    map.put("recordsFiltered", count);
    map.put("data", list);
    return map;
}

@RequestMapping(value = "/modify", produces = "application/json;charset=UTF-8")
public @ResponseBody JsonResult modify(
        @RequestParam(value = "id", required = true) Integer id,
        @RequestParam(value = "email", required = false) String email,
        @RequestParam(value = "phone", required = false) String phone) {
        
    JsonResult result = new JsonResult();
        
    Admin admin = adminService.getAdminById(id);
    if (admin == null) {
        result.setStatus(false);
        result.setMessage("改用户信息查找失败");
        return result;
    }
        
    admin.setEmail(email);
    admin.setPhone(phone);

    String validateResult = ValidationUtil.beanValidate(admin); // 服务器端对bean进行验证,失败则返回失败信息
    if (!validateResult.isEmpty()) {
        result.setMessage(validateResult);
        result.setStatus(false);
        return result;
    }
        
    try {result.setStatus(adminService.modify(admin));}
    catch (Exception e) {
        result.setStatus(false);
        result.setMessage(e.getMessage());
    }
        
    result.setMessage(result.getStatus() ? "修改成功" : "修改失败[" + result.getMessage() + "]");
    return result;
}

 

© 著作权归作者所有

共有 人打赏支持
b
粉丝 1
博文 29
码字总数 49010
作品 0
兰州
程序员
缅甸银河国际开户13170533331

解决这个问题涉及到两个方面的问题: 配置问题 、引入静态文件问题 1、配置问题 web.xml配置的DispatchServlet如下: [html] view plain copy springmvc org.springframework.web.servlet.D...

银河国际
05/26
0
0
Struts2 整合jQuery实现Ajax功能

Struts2 整合jQuery实现Ajax功能 技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美。 首先明确个概念: jQuery是什么:是...

孙斐
2011/10/12
0
2
Java 代码生成器 - InfinityJEEEU

无垠式 Java 代码生成器 JEEEU 版 项目介绍 这是最轻量级的代码生成器,生成物大概占用7.5M数据大小。 采用Servlet,JSP, JSON, Easy UI等简单技术实现,是标准的Model2的MVC设计模式的架构。...

火箭船
05/28
0
0
JQuery中使用Ajax实现诸如登录名检测等异步请求Demo

上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情...

冬至饮雪
2016/01/23
0
0
jQuery冲突问题的解决方法

在JSP中使用<jsp:include page="somethingPage.jsp"></jsp>来嵌套页面的时候,会出现jQuery之间的冲突。 解决办法: 在需要嵌套的页面中有jQuery引入冲突问题的地方做如下处理: var $jq = ...

Ryan-瑞恩
2013/09/11
0
0
简单灵活的 Java CMS - EasyCms

简介 Java EasyCms 使用最简单性能最高的框架,将cms系统简单到极致,灵活的栏目扩展,快速的构建普通网站 生成的静态演示站(测试): www.j4cms.com 用到的框架工具 java,servlet,guice...

姜小北
2017/08/02
0
0
cjbi/wetech-admin

Wetech-Admin Wetech-Admin 是基于Maven+Spring+SpringMVC+Mybatis的轻量级后台管理系统,适用于中小型项目的管理后台,支持按钮级别的权限控制,系统具有最基本的用户管理、角色管理、资源管...

cjbi
04/20
0
0
jquery 提交form表单

这个其实挺简单的,只是一开始我想错了,一开始我打算用jQuery + jQuery.form插件来做,其实不必的,只需要jQuery插件就可以了。首先,在jsp页面中导入jQuery, <script type="text/javascr...

背起行囊去远行
2013/03/20
0
0
学习jQuery LigerUI框架

看人家在一个技术交流群里问到谁用过jQuery LigerUI这个框架?咦,我没用过,我才刚开始学习jQuery,没听说过!菜鸟的悲哀~去网上看看是什么东东!http://ligerui.googlecode.com去看看吧! ...

小人物_Amor
2013/02/22
0
9
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
06/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Weblogic问题解决记录

问题:点击登录,页面刷新但是不进去管理界面。解决:删除cookies再登录。

wffger
18分钟前
0
0
RxJava2的错误处理方案

最近使用retrofit2 + rxKotlin2写接口访问,想尽量平铺代码,于是就想到当借口返回的状态码为「不成功」时(比如:code != 200),就连同网络错误一起,统一在onError方法中处理。想法总是好的...

猴亮屏
26分钟前
0
0
程序的调试信息

调试二进制程序时,经常要借助GDB工具,跟踪程序的执行流程,获取程序执行时变量的值,以发现问题所在。GDB能得到这些信息,是因为编译程序时,编译器保存了相应的信息。Linux下的可执行程序...

qlee
49分钟前
0
0
应用级缓存

缓存命中率 从缓存中读取数据的次数与总读取次数的比例,命中率越高越好 java缓存类型 堆缓存 guavaCache Ehcache3.x 没有序列化和反序列化 堆外缓存ehcache3.x 磁盘缓存 存储在磁盘上 分布式...

writeademo
今天
0
0
python爬虫日志(3)find(),find_all()函数

1.一般来说,为了找到BeautifulSoup对象内任何第一个标签入口,使用find()方法。 以上代码是一个生态金字塔的简单展示,为了找到第一生产者,第一消费者或第二消费者,可以使用Beautiful Sou...

茫羽行
今天
0
0
java:thread:顺序执行多条线程

实现方案: 1.调用线程的join方法:阻塞主线程 2.线程池 package com.java.thread.test;public class MyThread01 implements Runnable {@Overridepublic void run() {Syste...

人觉非常君
今天
0
0
ElasticSearch 重写IK分词器源码设置mysql热词更新词库

常用热词词库的配置方式 1.采用IK 内置词库 优点:部署方便,不用额外指定其他词库位置 缺点:分词单一化,不能指定想分词的词条 2.IK 外置静态词库 优点:部署相对方便,可以通过编辑指定文...

键走偏锋
今天
19
0
Git 2.18版本发布:支持Git协议v2,提升性能

Git 2.18版本发布:支持Git协议v2,提升性能Git 2.18版本发布:支持Git协议v2,提升性能 新版本协议的主要驱动力是使 Git 服务端能够对各种 ref(分支与 tag)进行过滤操作。 这就意味着,G...

linux-tao
今天
0
0
python浏览器自动化测试库【2018/7/22-更新】

64位py2.7版本 更新 document_GetResources 枚举页面资源 document_GetresourceText 获取指定url的内容 包括页面图片 下载地址下载地址 密码:upr47x...

开飞色
今天
42
0
关于DCL双重锁失效及解决方案

关于DCL双重锁失效及解决方案 Double Check Lock (DCL)实现单例 DCL 方式实现单例的优点是既能够在需要时才初始化单例,又能够保证线程安全,且单例对象初始化后调用getInstance方法不进行...

DannyCoder
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部