1 <!DOCTYPE html> 2 <%@ page contentType="text/html;charset=gbk" language="java" %> 3 <%@page isELIgnored="false" %> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <html lang="zh-CN"> 7 <head> 8 <meta charset="UTF-8"> 9 <title></title> 10 </head> 11 <!--[if lte IE 9]> 12 <script type="text/javascript" src="/project/newjs/html5.min.js"></script> 13 <script type="text/javascript" src="/project/newjs/respond.min.js"></script> 14 <![endif]--> 15 <link href="/project/newcss/AdminLTE.css" rel="stylesheet" type="text/css"> 16 <link href="/project/newcss/bootstrap.css" rel="stylesheet" type="text/css"> 17 <link rel="stylesheet" href="/project/plugins/datatables/dataTables.bootstrap.css"/> 18 <link rel="stylesheet" href="/project/plugins/datatables/jquery.dataTables.css"/> 19 <script type="text/javascript" src="/project/newjs/jquery-1.11.3.min.js"></script> 20 <script type="text/javascript" src="/project/newjs/bootstrap.min.js"></script> 21 <script type="text/javascript" src="/project/plugins/datatables/jquery.dataTables.min.js"></script> 22 <script type="text/javascript" src="/project/plugins/datatables/dataTables.bootstrap.js"></script> 23 24 <script type="text/javascript" src="snOpration.js"></script> 25 26 <body> 27 <div class="container"> 28 <!--menu link--> 29 <div class="row clearfix"> 30 <div class="col-md-12 column"> 31 <ul class="nav nav-pills bg-info"> 32 <li role="presentation"> 33 <a href="swDevice.jsp"><h4>1</h4></a> 34 </li> 35 <li role="presentation" class="active"> 36 <a href="#"><h4>2</h4></a> 37 </li> 38 </ul> 39 </div> 40 </div> 41 <span class="divider"></span> 42 43 <div class="btn-group" style="float: right;margin-right: 25px"> 44 <a id="delList" href="#" role="button" class="btn btn-danger">删除</a> 45 <a id="addBtn" href="#" role="button" class="btn btn-primary" data-toggle="modal">添加</a> 46 </div> 47 <table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%"> 48 <thead> 49 <tr> 50 <th width="5%">序号</th> 51 <th width="10%">车站</th> 52 <th width="10%">设备</th> 53 <th width="20%">规格型号</th> 54 <th width="10%">生产厂家</th> 55 <th width="10%">设备编号</th> 56 <th width="20%">备注</th> 57 <th width="15%">操作</th> 58 </tr> 59 </thead> 60 <tfoot> 61 <tr> 62 <th width="5%">序号</th> 63 <th width="10%">车站</th> 64 <th width="10%">设备</th> 65 <th width="20%">规格型号</th> 66 <th width="10%">生产厂家</th> 67 <th width="10%">设备编号</th> 68 <th width="20%">备注</th> 69 <th width="15%">操作</th> 70 </tr> 71 </tfoot> 72 </table> 73 74 <!--add model --> 75 <div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editLabel"> 76 <div class="modal-dialog" role="document"> 77 <div class="modal-content" id="content"> 78 <div class="modal-header"> 79 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 80 aria-hidden="true">×</span></button> 81 <h4 class="modal-title" id="editLabel">操作数据</h4> 82 </div> 83 <div class="modal-body" id="editBody"> 84 </div> 85 </div> 86 </div> 87 </div> 88 </div> 89 </body> 90 </html>
本实例主要是针对DataTable的一个简单的实例，包括增删改查等简单功能实现，把代码贴上来以后期如果使用到这一块可以直接搬过去就可以使用。
下面来贴出主要的代码片段，以上是主要列表Jsp代码。
下面贴出的Jsp代码是编辑表单和添加数据表单：
<%@ page import="com.tiedate.project.common.constant.SystemConstants" %> <%@ page import="com.tiedate.project.common.tags.SelectTag" %> <%@ page contentType="text/html;charset=GBK" language="java" %> <%@page isELIgnored="false" %> <%@taglib uri="/WEB-INF/tld/project.tld" prefix="project" %> <link href="/project/plugins/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="/project/plugins/bootstrapvalidator/bootstrapValidator.js"></script> <form class="form-horizontal" role="form" action="" id="myForm" method="post" data-bv-message="This value is not valid" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-validating="glyphicon glyphicon-refresh"> <input type="hidden" id="orgSelect" value="${map.vcOrgId}"/> <input type="hidden" id="staSelect" value="${map.vcStaId}"/> <div class="form-group hide"> <label for="NId" class="col-sm-2 control-label">ID</label> <div class="col-sm-10"> <input type="text" class="form-control" id="NId" name="nId" value="${map.nId}"/> </div> </div> <div class="form-group"> <label for="orgid" class="col-sm-2 control-label">组织机构</label> <div class="col-sm-10"> <select name="vcOrgId" id="orgid" check=",s,,1" onchange="changeWs(1)" class="form-control"> <project:selectoptions name="<%=SelectTag.GET_SUB_ORG_OR_SELF%>" type="1"/> </select> </div> </div> <div class="form-group"> <label for="vcStation" class="col-sm-2 control-label">车站</label> <div class="col-sm-10"> <select name="vcStaId" class="form-control" id="vcStation"> </select> </div> </div> <div class="form-group"> <label for="vcDevice" class="col-sm-2 control-label">设备</label> <div class="col-sm-10"> <input type="text" class="form-control" id="vcDevice" name="vcDevice" value="${map.vcDevice}"/> </div> </div> <div class="form-group"> <label for="type" class="col-sm-2 control-label">规格型号</label> <div class="col-sm-10"> <input type="text" class="form-control" id="type" name="vcClass" value="${map.vcClass}"/> </div> </div> <div class="form-group"> <label for="doTimeId" class="col-sm-2 control-label">生产厂家</label> <div class="col-sm-10"> <input type="text" class="form-control" id="doTimeId" name="vcProducter" value="${map.vcProducter}"/> </div> </div> <div class="form-group"> <label for="condition" class="col-sm-2 control-label">设备编号</label> <div class="col-sm-10"> <textarea class="form-control" rows="5" id="condition" name="vcNumber">${map.vcNumber}</textarea> </div> </div> <div class="form-group"> <label for="vcNote" class="col-sm-2 control-label">备注</label> <div class="col-sm-10"> <textarea class="form-control" rows="5" id="vcNote" name="vcNote">${map.vcNote}</textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" id="save" class="btn btn-primary">保存</button> <button type="button" id="cancel" class="btn btn-default">取消</button> </div> </div> </form> <script type="text/javascript"> $(document).ready(function () { var orgSelect = $("#orgSelect").val(); var staSelect = $("#staSelect").val(); $('#orgid').val(orgSelect); changeWs(staSelect); }); </script> <script type="text/javascript"> var $save = $('#save'), $form = $('#myForm'), $modal = $("#editModal") ; $("#cancel").on('click', function () {//click cancel button hide form modal $modal.modal('hide'); }); $(document).ready(function () { $form.bootstrapValidator({//Validator form message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) {//This option is useful when you want to use Ajax to submit the form data: $.ajax({ url: "/project/device/snAdd.action", type: "post", data: $form.serialize(), success: function () { $modal.modal('hide'); if ($("#NId").val()) {//edit start = $("#example").dataTable().fnSettings()._iDisplayStart; total = $("#example").dataTable().fnSettings().fnRecordsDisplay(); window.location.reload(); } else {//add location.reload(); } } }); return false; }, fields: { vcRespDep: { message: 'The username is not valid', validators: { notEmpty: { message: '此项不能为空！' } } }, vcStation: { message: 'The username is not valid', validators: { notEmpty: { message: '此项不能为空！' } } }, vcDevice: { message: 'The username is not valid', validators: { notEmpty: { message: '此项不能为空！' } } }, vcClass: { message: 'The username is not valid', validators: { notEmpty: { message: '此项不能为空！' } } } } }); }); </script>
下面贴出的是主要的js代码
/** * Created by 123456 on 2015/12/13. */ $(document).ready(function () { var table = $('#example').DataTable({ "bProcessing": true,//保持加载提示 "bStateSave": true,//加载记忆页码 "ajax": "/project/device/snDeviceAll.action", "columns": [ {"data": "N_ID"}, {"data": "VC_STANAME"}, {"data": "VC_DEVICE"}, {"data": "VC_CLASS"}, {"data": "VC_PRODUCTER"}, {"data": "VC_NUMBER"}, {"data": "VC_NOTE"}, {"data": "opration"} ], "columnDefs": [{ "targets": -1,//del "data": null, "defaultContent": "<button id='edit' class='btn btn-primary' type='button'>编辑</button>" + "<button id='del' class='btn btn-primary' type='button'>删除</button>" }, { "targets": 0,//hide one cell "visible": false, "searchable": false } ] }); //select row $('#example tbody').on('click', 'tr', function () { $(this).toggleClass('selected'); }); //del data $('#example tbody').on('click', '#del', function () { var data = table.row($(this).parents('tr')).data(); var nId = data.N_ID; var status = 0; if (confirm("数据将永久删除，你确定要删除吗？")) { $.ajax({ url: "/project/device/snDel.action?nId=" + nId, type: "POST" }).done(function (doc) { if (doc === 1) { table.ajax.reload(); } }); } }); //batch data del $('#delList').click(function () { var data = table.rows('.selected').data(); $.each(data, function (index, value) { }); //alert(table.rows('.selected').data().length + ' row(s) selected'); }); //add modal $("#addBtn").on('click', function () { $('#editModal').modal('show'); $("#editBody").load('/project/device/snForm.jsp', function () { }); }); //edit data $('#example tbody').on('click', '#edit', function () { var data = table.row($(this).parents('tr')).data(); //alert(data.N_ID); $("#editBody").load('/project/device/snGetOne.action?nId=' + data.N_ID, function (responseTxt, statusTxt, xhr) { $('#editModal').modal('show'); }); }); }); //get station select data,Default selected function changeWs(staId) { var orgId = $("#orgid").val(); $.ajax({ url: "/project/device/getStationByOrg.action?orgId=" + orgId, type: "post", dataType: "json", cache: true, success: function (data) { var vcStation = $("#vcStation"); vcStation.empty(); vcStation.append("<option value=''>请选择</option>"); $.each(data, function (index, value) { if (null !== staId && staId == data[index].STAID) { vcStation.append("<option value='" + data[index].STAID + "' selected>" + data[index].STANAME + "</option>"); } else { vcStation.append("<option value='" + data[index].STAID + "'>" + data[index].STANAME + "</option>"); } }); }, error: function () { } }); }
下面贴出的是后台代码片段：
package com.tiedate.csmiswh.business.device; import com.tiedate.csmis.common.constant.SystemConstants; import com.tiedate.csmis.common.util.StringUtil; import com.tiedate.csmis.system.org.OrgNameQueryById; import net.sf.json.JSONArray; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.jdbc.core.PreparedStatementSetter; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import java.sql.PreparedStatement; import java.sql.SQLException; import java.util.HashMap; import java.util.List; import java.util.Map; /** * Created by 123456 on 2015/12/15. */ @Controller @RequestMapping("/device") public class SnController { @Autowired private JdbcTemplate jdbcTemplate; @RequestMapping(value = "/snDeviceAll") @ResponseBody public Object snAll(@RequestParam(value = "staid", required = false) String staid) { String sqlStr = "select N_ID,VC_STANAME,VC_DEVICE,VC_CLASS,VC_PRODUCTER,VC_NUMBER,VC_NOTE from device t where" + " t.vc_server = '12345' and t.vc_staid = ?"; if (null == staid || "".equals(staid)) { sqlStr = "select N_ID,VC_STANAME,VC_DEVICE,VC_CLASS,VC_PRODUCTER,VC_NUMBER,VC_NOTE from device t where" + " t.vc_server = '12345'"; ; } List<Map<String, Object>> list = null; Map data = new HashMap(); try { if (null == staid || "".equals(staid)) { list = jdbcTemplate.queryForList(sqlStr); } else { list = jdbcTemplate.queryForList(sqlStr, staid); } data.put("data", list); } catch (Exception ex) { ex.printStackTrace(); } finally { if (null != list && list.size() > 0) { System.out.println("=====data======" + JSONArray.fromObject(data).toString()); return data; } else { return null; } } } /*** * SW del * * @param nId * @return */ @RequestMapping(value = "/snDel") @ResponseBody public Object swDel(@RequestParam(value = "nId") final String nId) { String sqlStr = "delete from device where n_id=?"; int i = 0; try { i = jdbcTemplate.update(sqlStr, new PreparedStatementSetter() { @Override public void setValues(PreparedStatement ps) throws SQLException { ps.setString(1, nId); } }); } catch (Exception ex) { ex.printStackTrace(); } finally { return i; } } /*** * SW Add Edit * * @param sw * @return */ @RequestMapping(value = "/snAdd") @ResponseBody public Object swAdd(final SnDevice sw) { String sqlStr = "insert into device(VC_SERVER,N_ID,VC_STAID,VC_STANAME,VC_DEVICE,VC_CLASS,VC_PRODUCTER,VC_NUMBER,VC_NOTE,VC_ORGID) " + "values(?,?,?,?,?,?,?,?,?,?)"; if (StringUtil.isNotEmpty(sw.getnId())) { sqlStr = "update device set VC_STAID=?,VC_STANAME=?,VC_DEVICE=?,VC_CLASS=?,VC_PRODUCTER=?,VC_NUMBER=?,VC_NOTE=?,VC_ORGID=?" + " where N_ID=?"; } int i = 0; try { if (StringUtil.isNotEmpty(sw.getnId())) { i = jdbcTemplate.update(sqlStr, new PreparedStatementSetter() { @Override public void setValues(PreparedStatement ps) throws SQLException { ps.setString(1, sw.getVcStaId()); ps.setString(2, OrgNameQueryById.getStationName(sw.getVcStaId())); ps.setString(3, sw.getVcDevice()); ps.setString(4, sw.getVcClass()); ps.setString(5, sw.getVcProducter()); ps.setString(6, sw.getVcNumber()); ps.setString(7, sw.getVcNote()); ps.setString(8, sw.getVcOrgId()); ps.setString(9, sw.getnId()); } }); } else { i = jdbcTemplate.update(sqlStr, new PreparedStatementSetter() { @Override public void setValues(PreparedStatement ps) throws SQLException { ps.setString(1, SystemConstants.SERVER_ID); ps.setLong(2, System.currentTimeMillis()); ps.setString(3, sw.getVcStaId()); ps.setString(4, OrgNameQueryById.getStationName(sw.getVcStaId())); ps.setString(5, sw.getVcDevice()); ps.setString(6, sw.getVcClass()); ps.setString(7, sw.getVcProducter()); ps.setString(8, sw.getVcNumber()); ps.setString(9, sw.getVcNote()); ps.setString(10, sw.getVcOrgId()); } }); } } catch (Exception ex) { ex.printStackTrace(); } finally { return i; } } /*** * SW queryObject * * @param nId * @return */ @RequestMapping(value = "/snGetOne") @ResponseBody public Object swGetOne(@RequestParam(value = "nId") final String nId) { String sqlStr = "select N_ID nId,VC_STAID vcStaId,VC_STANAME vcStaName," + "VC_DEVICE vcDevice,VC_CLASS vcClass,VC_PRODUCTER vcProducter,VC_NUMBER vcNumber,VC_NOTE vcNote,VC_ORGID vcOrgId from device where n_id='" + nId + "'"; ModelAndView mv = new ModelAndView("/svg/device/snForm.jsp"); SnDevice sw = jdbcTemplate.queryForObject(sqlStr, BeanPropertyRowMapper.newInstance(SnDevice.class)); System.out.println(JSONArray.fromObject(sw).toString()); mv.addObject("map", sw); System.out.println("result::: " + sw.getVcDevice()); return mv; } }
最后贴出实体bean就不贴了。更多实例参考官网地址 http://editor.datatables.net/examples/styling/bootstrap.html，http://datatables.club/example/