datatable使用笔记
这是一个使用datatable的jsp文件实例，实现了点击单元格后编辑单元格所在行的内容。
1 <%@ page pageEncoding="UTF-8"%> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <title>场馆信息编辑</title> 6 <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" /> 7 <link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.min.css"> 8 <link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css"> 9 10 <style type="text/css"> 11 table.dataTable tr td:name { 12 text-align: center; 13 } 14 15 table.dataTable tr td:name:before { 16 content: "\f096"; /* fa-square-o */ 17 font-family: FontAwesome; 18 } 19 20 table.dataTable tr.selected td:name:before { 21 content: "\f046"; /* fa-check-square-o */ 22 } 23 </style> 24 <script type="text/javascript" charset="utf-8" language="javascript" src="./js/jquery-1.11.1.min.js"></script> 25 <script type="text/javascript" charset="utf-8" language="javascript" src="./dist/js/bootstrap.min.js"></script> 26 <script type="text/javascript" charset="utf-8" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> 27 <script type="text/javascript" class="init"> 28 var table; 29 var courtinfoarray = new Array(); 30 $(document).ready(function() { 31 //获取当前点击按钮所在行的内容 32 $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) { 33 var tdobj = $(this); 34 var nowTable = document.getElementById("example"); 35 var cellArray = new Array(); 36 var str1 = tdobj.text(); 37 if(str1=="编辑") 38 { 39 var e = e || window.event; 40 var target = e.target || e.srcElement; 41 if (target.parentNode.tagName.toLowerCase() == "td") { 42 43 //获取行号 44 var rowIndex1 = target.parentNode.parentNode.rowIndex; 45 var column = nowTable.rows[rowIndex1].cells.length-1; 46 47 for(var i=0;i<column;i++) 48 { 49 cellArray[i] = nowTable.rows[rowIndex1].cells[i].innerHTML; 50 } 51 52 //给模态框赋初始值 53 document.getElementById("courtName").value=cellArray[0];//场馆名 54 document.getElementById("openTime").placeholder=cellArray[1];//开馆时间 55 document.getElementById("closeTime").placeholder=cellArray[2];//闭关时间 56 document.getElementById("courtCount").placeholder=cellArray[3];//资源数目 57 document.getElementById("courtPrice").placeholder=cellArray[4];//价格 58 59 //弹出模态框 60 $("#myModal").modal({ keyboard:true}); 61 } 62 63 } 64 } ); 65 $.post("courtinfo.action", {"dataType":"json"}, function(data, status){ 66 var infojson = JSON.parse(data); 67 var i=0; 68 $(infojson).each(function(){ 69 courtinfoarray[i] = new Array(); 70 courtinfoarray[i].push(this.v_name); 71 courtinfoarray[i].push(this.open_time); 72 courtinfoarray[i].push(this.close_time); 73 courtinfoarray[i].push(this.num); 74 courtinfoarray[i].push(this.charge); 75 courtinfoarray[i].push(this.is_open); 76 i++; 77 }); 78 $('#example').dataTable( { 79 "oLanguage": { 80 "sSearch": "搜索:", 81 "sLengthMenu": "每页显示 _MENU_ 条记录", 82 "sZeroRecords": "Nothing found - 没有记录", 83 "sInfo": "显示第 _START_ 条到第 _END_ 条记录,一共 _TOTAL_ 条记录", 84 "sInfoEmpty": "显示0条记录", 85 "oPaginate": { 86 "sPrevious": " 上一页 ", 87 "sNext": " 下一页 ", 88 } 89 }, 90 "bStateSave": true, 91 "bProcessing":true, 92 "data": courtinfoarray, 93 "columns": [ 94 { "title": "场馆名称" }, 95 { "title": "开馆时间" }, 96 { "title": "闭馆时间" }, 97 { "title": "价格", "class": "center" }, 98 { "title": "数目", "class": "center" }, 99 {"title":"是否开放","class":"center" }, 100 {"title":"编辑","class":"center",defaultContent:"<button type=\"button\" class=\"btn btn-info\">编辑</button>", orderable: true} 101 ], 102 order: [ 1, 'asc' ] 103 } ); 104 }); 105 }); 106 107 function mysubmit() 108 { 109 alert("确定修改吗"); 110 document.getElementById("editform").submit(); 111 } 112 </script> 113 </head> 114 <body> 115 116 <ul class="breadcrumb"> 117 <li><a href="courtinfo.jsp">首页</a></li> 118 <li class="active">场馆信息编辑</li> 119 </ul> 120 <body> 121 <div class="container" style="margin-top: 10px" align="center"> 122 <table cellpadding="0" cellspacing="0" border="0" 123 class="table table-striped table-bordered table-hover dispaly" 124 id="example"> 125 <thead> 126 <tr> 127 <th>馆名</th> 128 <th>开馆时间</th> 129 <th>闭关时间</th> 130 <th>资源数目</th> 131 <th>价格</th> 132 <th width="%18">是否开放</th> 133 <th>编辑</th> 134 </tr> 135 </thead> 136 </table> 137 </div> 138 139 <!-- 模态框（Modal） --> 140 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 141 aria-labelledby="myModalLabel" aria-hidden="true"> 142 <div class="modal-dialog"> 143 <div class="modal-content"> 144 <div class="modal-header"> 145 <button type="button" class="close" data-dismiss="modal" 146 aria-hidden="true">×</button> 147 <h4 class="modal-title" id="myModalLabel">编辑该馆内容</h4> 148 </div> 149 <form class="bs-example bs-example-form" action="courtedit.action" method="post" role="form" id="editform"> 150 <div class="input-group"> 151 <span class="input-group-addon">场馆名称</span> <input 152 type="text" class="form-control" placeholder="" id="courtName" readonly="readonly" name="courtname"> 153 </div> 154 <div class="input-group"> 155 <span class="input-group-addon">开馆时间</span> <input type="text" 156 class="form-control" placeholder="" id="openTime" name="opentime"> 157 </div> 158 <div class="input-group"> 159 <span class="input-group-addon">闭馆时间</span> <input type="text" 160 class="form-control" placeholder="" id="closeTime" name="closetime"> 161 </div> 162 <div class="input-group"> 163 <span class="input-group-addon">资源数量</span> <input type="text" 164 class="form-control" id="courtCount" placeholder="" name="courtcount"> 165 </div> 166 <div class="input-group"> 167 <span class="input-group-addon">场馆价格</span> <input type="text" 168 class="form-control" id="courtPrice" placeholder="" name="courtcharge"> 169 </div> 170 <div class="input-group"> 171 <span class="input-group-addon">是否开放</span> 172 <select class="form-control" id="openornot" name="isopen"> 173 <option>开放</option> 174 <option>闭馆</option> 175 </select> 176 </div> 177 <div class="modal-footer"> 178 <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button> 179 <button type="button" class="btn btn-primary" onclick="mysubmit()">提交更改</button> 180 </div> 181 </form> 182 </div> 183 <!-- /.modal-content --> 184 </div> 185 <!-- /.modal --> 186 </div> 187 </body> 188 </html>
