Jquery Ingrid 表格插件的使用

demo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <!--base href="<%=basePath%>"-->

    <link rel="stylesheet" type="text/css" href="css/ingrid.css">

   

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.cookie.js"></script>

<script type="text/javascript" src="js/jquery.ingrid.js"></script>

<script type="text/javascript">

$(document).ready(

         function() {

                   $("#table1").ingrid({

                            url: 'remote.jsp',

                            type:'POST',

                            height: 200,

                            minColWidth: 30,

                            initialLoad: false,

                            rowClasses: ['grid-row-style1','grid-row-style1','grid-row-style2','grid-row-style1','grid-row-style1','grid-row-style3'],

                            sorting: false,

                            resizableCols: false,

                            paging: true,

                            recordsPerPage: 5,

                            totalRecords: 60,

                            extraParams: {test : 'Hello,tang',name:'test'}                          

                   });

         }

);

</script>

        

</head>

<body>

<table id="table1">

<thead>

    <tr>

      <th>日期</th>

      <th>地址</th>

      <th>姓名</th>

      <th>Artist</th>

    </tr>

</thead>

<tbody>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

</tbody>

</table>

</body>

</html>

 remote.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <base href="<%=basePath%>">

   

    <title>My JSP 'remote.jsp' starting page</title>

   

         <meta http-equiv="pragma" content="no-cache">

         <meta http-equiv="cache-control" content="no-cache">

         <meta http-equiv="expires" content="0">   

         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

         <meta http-equiv="description" content="This is my page">

         <!--

         <link rel="stylesheet" type="text/css" href="styles.css">

         -->

</head>

<body>

         <%

         //测试传递两个参数 (前面extraParams中列出的,值中文乱码)

         String str=request.getParameter("test");

         String name=request.getParameter("name");

         //控件本身的参数,用来获取当前页码 (通过页面再调用数据库相关的内容)

         String pagenumber=request.getParameter("page");

         System.out.println(str+"\t"+name+"\t"+pagenumber+"\t");

         %>

<table>

   <tbody>

         <%

         for(int i=0;i<5;i++){

         %>

                   <tr>

                            <td><%=pagenumber+(i+1)%></td>

                            <td>static col 2</td>

                            <td>static col 3</td>

                            <td>static col 4</td>

                   </tr>        

         <%

         }

         %>

    </tbody>

   </table>

</body>

</html>
 

你可能感兴趣的:(JavaScript,jquery,jsp,css,cache)