JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据

通过Eclipse创建一个简单的Spring MVC项目,使用其内置的JSON转换

在index.jsp文件中添加如下内容:

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery datatables</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css"><link type="text/css" rel="stylesheet" href="css/dataTables.tableTools.css" /><link type="text/css" rel="stylesheet" href="css/dataTables.bootstrap.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.dataTables.min.js"></script><script src="js/bootstrap.min.js"></script><style>
.selected {background-color: #DFF0D8;
}#example_length {float: left;
}.odd td strong {color: red;
}#deleteButton {float: left;
}#addButton {float: left;
}#topPlugin {float: left;margin-left: 10px;
}.modal-footer span {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;float: left;font-size: 16px;
}div.dataTables_paginate {margin: 0;white-space: nowrap;text-align: right;margin-top: 5px;
}.table th, .table td { text-align: center; height:25px;
}
</style></head>
<body><div style="height:20px;"></div><!-- 显示表格边框table-bordered  缩小表格间距table-condensed --><table id="example" class="table table-bordered table-condensed"><thead><tr><th><input type="checkbox" name="allChecked" /></th><th>id</th><th>部门名称</th><th>操作</th></tr></thead></table><!--单个删除确认对话框-->
<div class="modal fade" id="deleteOneModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true" > <!-- data-backdrop="static" 禁止点击弹框后面内容 --><form class="form-horizontal" role="form"><div class="modal-dialog modal-sm " > <!-- modal-sm 小的  modal-lg 大的 --><div class="modal-content"><div class="modal-header"><button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">提示信息</h4></div><div class="modal-body" style="text-align: left;"><h5>您确定要删除当前信息吗？</h5></div><div class="modal-footer"><!-- <button type="button" class="btn btn-default"data-dismiss="modal">取消</button>--><button type="button" class="btn btn-primary" id="delSubmit">确认</button></div></div><!-- /.modal-content --></div></form>
</div><!--多个删除确认对话框-->
<div class="modal fade" id="deleteAllModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"><form class="form-horizontal" role="form"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">提示信息</h4></div><div class="modal-body" style="text-align: left;"><h5>您确定要删除选中信息吗？</h5></div><div class="modal-footer"><!-- <button type="button" class="btn btn-default"data-dismiss="modal">取消</button>--><button type="button" class="btn btn-primary" id="delAllSubmit">确认</button></div></div><!-- /.modal-content --></div></form>
</div><!--新增页面开始-->
<div class="modal fade" id="myModal-add-info" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">新 增</h4></div><form class="form-horizontal" role="form" action="/category_add" method="post"  id="category_add"><div class="modal-body"><%-- <div class="form-group"><label class="col-sm-3 control-label no-padding-right" >图 片：</label><div class="col-sm-5"><input  type="file" name="img1" class="file" id="img1"  style="width:180px; float: left" /></div><div class="col-sm-3"><input class="btn btn-sm btn-info" type="button" value="上传" id="uploadimg"/><span id="t"></span></div><input name="categoryImg" type="hidden" id="imageUrl" /></div>--%><div class="form-group"><label class="col-sm-3 control-label no-padding-right" >部门名称： </label><div class="col-sm-9"><input type="text"  class="form-control" id="typename"  name="name" style="width: 250px" maxlength="15" placeholder="10个汉字以内" /></div></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" >备注： </label><div class="col-sm-9"><input type="text"   class=" sortNumber form-control"  name="sortNumber" id="sortNumber" style="width: 250px" maxlength="3"/></div></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" >状态：</label><div class="control-group"><div class="radio col-sm-3" style="float: left"><label><input  type="radio" class=" yn1" name="isYn"  value="1"  checked/><span class="lbl">有效</span></label></div><div class="radio col-sm-3" style="float: left"><label><input  type="radio" class=" yn1" name="isYn"  value="0"/><span class="lbl">无效</span></label></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-default"data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" id="btnsubmit">提交</button></div></form></div><!-- /.modal-content --></div></div><script>$(function() {var table = $("#example").DataTable({"aLengthMenu":[10,20,40,60], //动态指定分页后每页显示的记录数。"searching":false,//禁用搜索"lengthChange":true, //是否启用改变每页显示多少条数据的控件"sort" : "position",  //是否开启列排序，对单独列的设置在每一列的bSortable选项中指定"deferRender":true,//延迟渲染"bStateSave" : false, //在第三页刷新页面，会自动到第一页"iDisplayLength" : 10,  //默认每页显示多少条记录"iDisplayStart" : 0,"ordering": false,//全局禁用排序"dom": '<l<\'#topPlugin\'>f>rt<ip><"clear">',"ajax": {"type": "POST","url":'<%=request.getContextPath()%>/datatables/listceshi.do',},"aoColumns" : [{  //aoColumns设置列时，不可以任意指定列，必须列出所有列。"mData" : "id","orderable": false , // 禁用排序"sDefaultContent" : "","sWidth" : "2%"},{"mData" : "id","orderable" : false, // 禁用排序"sDefaultContent" : "","sWidth" : "6%",}, {"mData" : "username","orderable" : false, // 禁用排序"sDefaultContent" : "","sWidth" : "10%"},{"mData" : "id","orderable" : false, // 禁用排序"sDefaultContent" : '',"sWidth" : "10%","render":function(data, type, full, meta){  //render改变该列样式,4个参数，其中参数数量是可变的。return   data='<button id="deleteOne" class="btn btn-danger btn-sm" data-id='+data+'>删 除</button>';}}//data指该行获取到的该列数据//row指该行，可用row.name或row[2]获取第3列字段名为name的值//type调用数据类型，可用类型“filter”,"display","type","sort",具体用法还未研究//meta包含请求行索引，列索引，tables各参数等信息],"columnDefs" : [{"orderable" : false, // 禁用排序"targets" : [0], // 指定的列"data" : "id","render" : function(data, type, full, meta) {return '<input type="checkbox" value="'+ data + '" name="id"/>';}}],"oLanguage" : { // 国际化配置"sProcessing" : "正在获取数据，请稍后...","sLengthMenu" : "显示 _MENU_ 条","sZeroRecords" : "没有找到数据","sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条","sInfoEmpty" : "记录数为0","sInfoFiltered" : "(全部记录数 _MAX_ 条)","sInfoPostFix" : "","sSearch" : "搜索","sUrl" : "","oPaginate" : {"sFirst" : "第一页","sPrevious" : "上一页","sNext" : "下一页","sLast" : "最后一页"}},initComplete:initComplete,drawCallback: function( settings ) {$('input[name=allChecked]')[0].checked=false;//取消全选状态}});/*** 表格加载渲染完毕后执行的方法* @param data*/function initComplete(data){//删除用户按钮的HTMLDOMvar topPlugin='<button   class="btn btn-danger btn-sm" id="deleteAll">删除</button> <button   class="btn btn-primary btn-sm addBtn" >新 增</button>' ;$("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML}/*** 单行删除按钮点击事件响应*/$(document).delegate('#deleteOne','click',function() {var id=$(this).data("id");$("#delSubmit").val(id);$("#deleteOneModal").modal('show');});/*** 点击确认删除按钮*/$(document).delegate('#delSubmit','click',function(){var id=$(this).val();$('#deleteOneModal').modal('hide');$.ajax({/* 后台未实现 */url:contextPath+"delete.do?id="+id,async:true,type:"GET",dataType:"json",cache:false,    //不允许缓存success: function(data){var obj = eval(data);if(obj.code==1){window.location.reload();}else{alert("删除失败");}},error:function(data){alert("请求异常");}});});/*** 多选选中和取消选中,同时选中第一个单元格单选框,并联动全选单选框*/$('#example tbody').on('click', 'tr', function(event) {var allChecked=$('input[name=allChecked]')[0];//关联全选单选框$($(this).children()[0]).children().each(function(){if(this.type=="checkbox" && (!$(event.target).is(":checkbox") && $(":checkbox",this).trigger("click"))){if(!this.checked){this.checked = true;addValue(this);var selected=table.rows('.selected').data().length;//被选中的行数console.info(selected+'个数');//全选单选框的状态处理var recordsDisplay=table.page.info().recordsDisplay;//搜索条件过滤后的总行数var iDisplayStart=table.page.info().start;// 起始行数if(selected === table.page.len()||selected === recordsDisplay||selected === (recordsDisplay - iDisplayStart)){allChecked.checked = true;}}else{this.checked = false;cancelValue(this);allChecked.checked = false;}}});$(this).toggleClass('selected');//放在最后处理，以便给checkbox做检测});/*** 全选按钮被点击事件*/$('input[name=allChecked]').click(function(){if(this.checked){$('#example tbody tr').each(function(){console.info(1);if(!$(this).hasClass('selected')){$(this).click();console.info(2);}});}else{$('#example tbody tr').click();}});/*** 单选框被选中时将它的value放入隐藏域*/function addValue(para) {var userIds = $("input[name=userIds]");if(userIds.val() === ""){userIds.val($(para).val());}else{userIds.val(userIds.val()+","+$(para).val());}}/*** 单选框取消选中时将它的value移除隐藏域*/function cancelValue(para){//取消选中checkbox要做的操作var userIds = $("input[name=allChecked]");var array = userIds.val().split(",");userIds.val("");for (var i = 0; i < array.length; i++) {if (array[i] === $(para).val()) {continue;}if (userIds.val() === "") {userIds.val(array[i]);} else {userIds.val(userIds.val() + "," + array[i]);}}}/*** 新增*/$(document).delegate('.addBtn','click',function() {$('#myModal-add-info').modal('show');});/*** 批量删除*/$(document).delegate('#deleteAll','click',function() {var theArray=[];$("input[name=id]:checked").each(function() { theArray.push($(this).val());});if(theArray.length<1){alert("请至少选择一个"); }else{alert(theArray);}});});</script></body>
</html>

创建控制类TestController.java和实体类Ceshi.java:

TestController.java

@RequestMapping("/datatables")
@Controller
public class TestController {@RequestMapping(value="/listceshi")@ResponseBodypublic Map<String, Object>  listjsonceshi(){Map<String, Object> map = new HashMap<String, Object>();int count=20;List<Ceshi> list=new ArrayList<Ceshi>();for (int i = 0; i < 20; i++) {Ceshi ceshi=new Ceshi();ceshi.setId(i);ceshi.setUsername("小"+i);list.add(ceshi);}map.put("recordsTotal", count);map.put("recordsFiltered", count);map.put("aaData", list);return map;}}

Ceshi.java

public class Ceshi {private int id;private String username;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}}

访问: http://localhost:8080/SpringMVC_datatables/index.jsp

效果为:

全选删除

单个删除

完整Demo下载：http://download.csdn.net/detail/u011781521/9672394

JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据相关推荐

ajax的结果处理,jQuery ajax返回数据的后续处理
简述在jQuery中ajax默认是异步请求,我们大多数也需要异步请求,比如: var temp; $.ajax({ type : "post", url : 'test.json ...
datatables.js 简单使用--多选框和服务器端分页
说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用内容:多选框和服务器端分页缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...
jquery插件 autoComboBox 自动创建联动的下拉框如:省市区联动
废话{ 诞生背景: 问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢?? 答: 是,留下继续阅读. ...
为chosen jQuery插件动态添加未找到的下拉框值
一.问题描述做项目的时候遇到的问题:chosen选项中没有可选值,想实现用户输入的值动态添加入option,存到后台保存二.插件准备下载网址:https://harvesthq.github.i ...
jq中ajax返回数据的json_encode,jQuery AJAX使用JSON返回对PHP脚本的调用
我一直在用这个把头砸在砖墙上,我已经尝试了很多关于stackoverflow的解决方案,但是找不到一个可行的解决方案! 基本上,当我发布我的AJAX时,PHP返回JSON,但AJAX显示的是Undef ...
GUI编程基础学习(三)——单选按钮、复选框、组合框
单选按钮JRadioButton JRadioButton组件用于实现一个单选按钮.JRadioButton类可以单独使用,也可以与ButtonGroup类联合使用,当其单独使用时,该单选按钮可以被选 ...
1000个jquery插件
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件.二手图书二手书特价书旧书网 (2)jQuery-Horizontal ...
1000个JQuery插件（转载）
超强1000个jquery极品插件!(转) 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++ ...
ajax上传图片成功但不显示,jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)...
参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...

JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据

JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据相关推荐

最新文章

热门文章