首页 > 代码库 > jquery_datatables

jquery_datatables

2024-08-03 01:23:19   218人阅读

环境准备

　　1.dataTables

　　　　下载：http://download.csdn.net/detail/marskuroky/8173839

　　2.jsonObject

　　　　下载：http://download.csdn.net/detail/marskuroky/8173831

前台代码

　　只是简单测试，把bean放在了session中，方便提取

<jsp:useBean id="userInfo" class="XXX.UserInfoSessionBean" scope="session"></jsp:useBean>

　　dataTables代码展开，放到相应的路径（我的/WEB-INF/JS/）

　　jsp代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%@page import="XXX.Const"%><%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@taglib prefix="s" uri="/struts-tags"%><jsp:useBean id="userInfo" class="XXX.UserInfoSessionBean" scope="session"></jsp:useBean><%    String basePath = request.getContextPath() + "/";%><html><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><link href="http://www.mamicode.com/js/DataTables/media/css/jquery.dataTables.min.css"  rel="stylesheet" type="text/css" media="screen" /><link href="http://www.mamicode.com/js/DataTables/media/css/jquery.dataTables.css"  rel="stylesheet" type="text/css" media="screen" /><script type="text/javascript" src="http://www.mamicode.com/js/DataTables/media/js/jquery.js"></script><script type="text/javascript" src="http://www.mamicode.com/js/DataTables/media/js/jquery.dataTables.js"></script><style type="text/css">    .borRed{        color:red;    }</style><script type="text/javascript" language="javascript">var tmail = <%=userInfo.getMailAddr()%>alert(tmail[0].adOwnId);$(document).ready(function() {    //$(‘#demo‘).html( ‘<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>‘ );    alert(222);    $("#example").dataTable({        "aaData": tmail,                  "aoColumns": [                      { "mDataProp": "selectedRateUsd" },                     { "mDataProp": "selectedRateJpy" },                      { "mDataProp": "adOwnId" },                     { "mDataProp": "connDbId" },                ]            } );});</script><title>Insert title here</title></head><body><div id="contents"><table id="example">    <thead>        <tr>            <th>test1</th>            <th>test2</th>            <th>test3</th>            <th>test4</th>        </tr>    </thead>    <tbody>            </tbody></table></div></body></html>

　　后台代码

List<UserInfoSessionBean> list = new ArrayList<UserInfoSessionBean>();        UserInfoSessionBean bean1 = new UserInfoSessionBean();        bean1.setAdOwnId(1);        bean1.setConnDbId("222");        list.add(bean1);        UserInfoSessionBean bean2 = new UserInfoSessionBean();        bean2.setAdOwnId(2);        bean2.setConnDbId("444");        list.add(bean2);        JSONArray json = JSONArray.fromObject(list);// userInfo是准备存在session中的beanuserInfo.setMailAddr(json.toString());

 

　　

jquery_datatables


联系
我们