Jquery DataTable应用
来源：互联网 发布：美国飓风网络路径 编辑：程序博客网 时间：2024/05/20 16:12
API参数介绍请参照http://www.mamicode.com/info-detail-621566.html
http://www.cnblogs.com/ryanding/archive/2011/02/18/1957318.html
1.示例1 分页，并对指定表格行设计样式
/** * Created by 123 on 2017/2/14. */$(function () { initTable(); initQuery();});function initTable() { table = $("#case_table").myDataTable({ "sAjaxSource": ctx + '/web/config/getCaseList', "paramSelector": '#case_active,#case_state,#case_host,#case_path', "fnDrawCallback": function(oSettings){//改变行样式 $.each(oSettings.aoData,function(k,v){ var val1 = v._aData[3]; var val2 = v._aData[4]; var nths = $('#case_table tbody tr'); if(val1 == 'true'){ $($(nths).get(k)).find("td:eq(3)").css("background-color", "#57a957"); $($(nths).get(k)).find("td:eq(3)").text("上线"); }else{ $($(nths).get(k)).find("td:eq(3)").css("background-color", "#ee5f5b"); $($(nths).get(k)).find("td:eq(3)").text("下线"); } if(val2 == 'true'){ $($(nths).get(k)).find("td:eq(4)").css("background-color", "#57a957"); $($(nths).get(k)).find("td:eq(4)").text("正常"); }else{ $($(nths).get(k)).find("td:eq(4)").css("background-color", "#ee5f5b"); $($(nths).get(k)).find("td:eq(4)").text("异常"); } }); }, "aoColumns": [{ // 0 序号 bSortable: false, sWidth: 40 }, { // 1 部署主机 bSortable: true, sWidth: 80, }, { // 2 部署目录 bSortable: true, sWidth: 80, }, { // 3 客户端 bSortable: true, sWidth: 80, }, { // 4 配置 bSortable: true, sWidth: 60, }, { // 5 查看详情 bSortable: false, sWidth: 60, fnRender: function (obj) { var val = obj.aData[0]; return "<a href='javascript:;' onclick='queryCase({0})'>查看详情</a>".format(val); } }, { // 6 删除 bSortable: false, sWidth: 60, fnRender: function (obj) { var val = obj.aData[0]; return "<a href='javascript:;' onclick='deleteCase({0})'>删除</a>".format(val); } }, { // 7 更新时间 bSortable: false, sWidth: 120 }, { // 8 创建时间 bSortable: false, sWidth: 120 } ] });}function initQuery(){$("#case_query_btn").on("click", function () {table.fnDraw(); });}function deleteCase(id) { myConfirm('', '确定要删除', function() { $.ajax({ url: ctx + '/web/config/deleteCase', type: 'POST', dataType: 'json', data: { id:id }, success: function() { table.fnDraw(false); //initTable(); } }); });}<%@ 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>客户端监控</title> <jsp:include page="/WEB-INF/views/common.jsp"></jsp:include> <script src="${ctx }/resources/js/config/caseMg.js?<%=System.currentTimeMillis() %>" type="text/javascript"></script></head><body> <div class="form-inline"> <div class="control-group inline"> <label>客户端状态:</label> <select id="case_active" name="case_active" class="input-medium"> <option value=''>全部</option> <option value="1">上线</option> <option value="0">下线</option> </select> </div> <div class="control-group inline"> <label>配置状态:</label> <select id="case_state" name="case_state" class="input-medium"> <option value=''>全部</option> <option value="1">配置正常</option> <option value="0">配置异常</option> </select> </div> <br/> <div class="control-group inline"> <label>部署主机:</label> <input type="text" id="case_host" name="case_host" class="input-text-medium"> </div> <div class="control-group inline"> <label>部署目录:</label> <input type="text" id="case_path" name="case_path" class="input-text-medium"> </div> <div class="control-group pull-right"> <button type="button" class="btn btn-primary" id="case_query_btn">查询</button> </div> </div> <table id="case_table" class="table table-hover table-bordered table-condensed table-striped"> <thead> <tr> <th>序号</th> <th>部署主机</th> <th>部署目录</th> <th>客户端</th> <th>配置</th> <th>查看详情</th> <th>删除</th> <th>更新时间</th> <th>创建时间</th> </tr> </thead> <tbody></tbody> </table> </body></html>2.示例2 未使用datatable实现表格，该版本不带分页，但同样可以更改指定行样式/** * Created by 123 on 2017/2/14. */$(function () { initTable(); initQuery();});function initTable() { var case_active = $("#case_active").val(); var case_state = $("#case_state").val(); var case_host = $("#case_host").val(); var case_path = $("#case_path").val(); var caseListEl = $("#case_table").empty(); caseListEl.append(caseHead);$.ajax({ type: "POST", data: { active: case_active, state: case_state, host: case_host, path: case_path }, url: ctx + "/web/config/getCaseList", success: function (data) { if (data.length === 0) { caseListEl.append(caseEmpty); }else { $.each(data, function (i, a) { var config = caseBody.format(i + 1, a.host, a.path, a.active, a.state, a.firstTime,a.lastTime, a.id); caseListEl.append(config); if (a.active != true) { $("#case_active_" + (i + 1)).css("background-color", "#ee5f5b"); $("#case_active_" + (i + 1)).text("下线"); } else { $("#case_active_" + (i + 1)).css("background-color", "#57a957"); $("#case_active_" + (i + 1)).text("在线"); } if (a.state != true) { $("#case_state_" + (i + 1)).css("background-color", "#ee5f5b"); $("#case_state_" + (i + 1)).text("异常"); } else { $("#case_state_" + (i + 1)).css("background-color", "#57a957"); $("#case_state_" + (i + 1)).text("正常"); } }); } } });}function initQuery(){$("#case_query_btn").on("click", function () {table.fnDraw(); });}function deleteCase(id) { myConfirm('', '确定要删除', function() { $.ajax({ url: ctx + '/web/config/deleteCase', type: 'POST', dataType: 'json', data: { id:id }, success: function() { initTable(); } }); });}var caseEmpty = "<tbody><tr><th colspan=9>未找到该数据</th></tr></tbody>";var caseHead= "<thead><tr><th style='width:50px'>序号</th><th>部署主机</th><th>部署目录</th><th>客户端</th><th>配置</th><th>查看详情</th><th>删除</th><th>更新时间</th><th>创建时间</th></tr></thead>"; var caseBody="<tbody><tr><th style='width:50px'>{0}</th><th>{1}</th><th>{2}</th><th id='case_active_{0}'>{3}</th><th id='case_state_{0}'>{4}</th>" +"<th><a href='javascript:;' onclick='queryCase({0})'>查看详情</a><th><a href='javascript:;' onclick='deleteCase({0})'>删除</a></th>" +"<th>{5}</th><th>{6}</th></tr></tbody>";<%@ 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>客户端监控</title> <jsp:include page="/WEB-INF/views/common.jsp"></jsp:include> <script src="${ctx }/resources/js/config/caseMg.js?<%=System.currentTimeMillis() %>" type="text/javascript"></script></head><body> <div class="form-inline"> <div class="control-group inline"> <label>客户端状态:</label> <select id="case_active" name="case_active" class="input-medium"> <option value=''>全部</option> <option value="1">上线</option> <option value="0">下线</option> </select> </div> <div class="control-group inline"> <label>配置状态:</label> <select id="case_state" name="case_state" class="input-medium"> <option value=''>全部</option> <option value="1">配置正常</option> <option value="0">配置异常</option> </select> </div> <br/> <div class="control-group inline"> <label>部署主机:</label> <input type="text" id="case_host" name="case_host" class="input-text-medium"> </div> <div class="control-group inline"> <label>部署目录:</label> <input type="text" id="case_path" name="case_path" class="input-text-medium"> </div> <div class="control-group pull-right"> <button type="button" class="btn btn-primary" id="case_query_btn">查询</button> </div> </div> <table id="case_table" class="table table-hover table-bordered table-condensed table-striped"></table> </body></html>后台部分代码
public Map<String, Object> queryPage(Map<String, String> params, IDao dao) { Map<String, Object> result = new HashMap<String, Object>(); PageBean<Object> pageBean = new PageBean<Object>(0, 20); String iDisplayStart = params.get("iDisplayStart"); String iDisplayLength = params.get("iDisplayLength"); if (StringUtils.hasText(iDisplayStart)) { Integer _start = Integer.parseInt(iDisplayStart); localStart.set(_start); pageBean.setStart(_start); } if (StringUtils.hasText(iDisplayLength)) { Integer _length = Integer.parseInt(iDisplayLength); localLength.set(_length); pageBean.setLimit(_length); } List<Object> paramValues = new ArrayList<Object>(); String hql = buildQuery(params, paramValues); hql = toSortQL(hql, params); dao.find(pageBean, hql, paramValues.toArray()); int sEcho = Integer.parseInt(params.get("sEcho")); result.put("sEcho", sEcho + 1); result.put("aaData", toRowDatas(pageBean.getData())); result.put("iTotalRecords", pageBean.getCount()); result.put("iTotalDisplayRecords", pageBean.getCount()); return result; }public synchronized <T> PageBean<T> findBySQL(PageBean<T> pageBean, String sql, Object... values) { try { Query query = currentSession().createSQLQuery(sql); Query countQuery = currentSession().createSQLQuery(toCountSQL(sql)); setQueryParam(query, values); setQueryParam(countQuery, values); Object obj = countQuery.uniqueResult(); pageBean.setCount(getCount(obj)); query.setFirstResult(pageBean.getStart()); query.setMaxResults(pageBean.getLimit()); pageBean.setData(query.list()); return pageBean; } finally { closeSessionIfNecessary(); } }public class PageBean<T> { private int start; private int limit; private long count; private List<T> data = new ArrayList<T>(); public PageBean() { } public PageBean(int start, int limit) { this.start = start; this.limit = limit; } public int getStart() { return start; } public void setStart(int start) { this.start = start; } public int getLimit() { return limit; } public void setLimit(int limit) { this.limit = limit; } public long getCount() { return count; } public void setCount(long count) { this.count = count; } public List<T> getData() { return data; } public void setData(List<T> data) { this.data = data; } public String toString() { return "PageBean [start=" + start + ", limit=" + limit + ", count=" + count + ", data=" + data + "]"; }} 0 0
- Jquery DataTable应用
- Jquery datatable
- JQuery.DataTable
- jquery.datatable
- jquery datatable
- jquery datatable
- jquery datatable
- JQuery datatable
- jquery dataTable
- jquery datatable
- jquery datatable
- Jquery Datatable
- jquery DataTable
- （jQuery Datatable）jQuery Datatable
- JQuery DataTable 结合SpringMVC+Spring Data JPA应用（一）
- JQuery DataTable 结合SpringMVC+Spring Data JPA应用（二）
- 【转】jquery datatable学习
- jquery datatable学习
- hibernate Init()执行步奏与流程
- maven项目在打war包时出现非法字符: '\ufeff' 解决方案
- JavaScript设置Cookie 解释
- 【九度OJ】题目1028：继续畅通工程 解题报告
- 在win 10 14393 的版本中复制对象名称转ansi 多出符号
- Jquery DataTable应用
- Jump Game II
- python 文件去重复
- linux socket 操作链路层
- 字符串、字符处理总结
- 封装PlayerPrefs
- linux curl 定时执行 web请求
- 【leetcode】215. Kth Largest Element in an Array
- GYM 100182 E.Minesweeper（水~）
