JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据
来源:互联网 发布:java编写的著名游戏 编辑:程序博客网 时间:2024/05/16 17:11
通过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个参数,其中参数数量是可变的。 returndata='<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){ //删除用户按钮的HTMLDOM var 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")@Controllerpublic 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
0 0
- JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据
- jQuery DataTables插件自定义Ajax分页实现
- jquery插件之DataTables
- jquery插件之DataTables
- jquery插件之DataTables
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
- JQuery表格插件之Datatables
- Jquery插件之DataTables初探
- jQuery 的插件 dataTables
- jquery插件dataTables
- Jquery 表格插件DataTables
- jQuery datatables插件
- jquery dataTables插件详解
- jquery插件之DataTables 详细参数说明
- datatables之ajax请求
- JQuery datatables插件 使用ajax将struts2的action对象传递给datatables设置数据源方式
- jquery datatables自定义返回结果
- jQuery dataTables表格插件入门
- OpenJudge noi 310 Is It A tree(POJ1308)
- 算法基础复习-ShellSort
- openwrt 各目录分析
- 欢迎使用CSDN-markdown编辑器
- 循环队列———队列的顺序表示和实现
- JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据
- 三大范式
- 【洛谷2680】【BZOJ 4326】运输计划 lca+差分
- 图像的打开、修改、显示和保存示例(>OpenCV 2.0)
- F - "红色病毒"问题 进阶的指数型母函数
- JAVA --JDBC链接mysql数据库
- DBLINK触发的SCN异常
- 实现百度地图(最简单的实现方式,只是将地图显示出来,并没有什么功能)
- 安卓开发全教程(汇总)