Jquery DataTable应用

最新推荐文章于 2023-10-13 11:16:05 发布

原创最新推荐文章于 2023-10-13 11:16:05 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了两种客户端监控管理的方法：一种利用 DataTables 实现分页及指定行样式的动态更新；另一种则是在没有使用 DataTables 的情况下实现类似功能。此外，还展示了部分后台代码，包括分页查询和 SQL 查询的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 + "]";
    }


}