JQuery外掛之-----Datatables(三)Datatables實現多選框與AJAX返回資料
阿新 • • 發佈：2019-02-02
通過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){ //刪除使用者按鈕的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") @Controller public class TestController { @RequestMapping(value="/listceshi") @ResponseBody public 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
效果為:
全選刪除
單個刪除
