superTables锁定表头插件示例

来源：互联网发布：淘宝页面素材编辑：程序博客网时间：2024/06/05 03:06
<%@ 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 'supertable.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 href="js/superTables/superTables.css" rel="Stylesheet" type="text/css" /><script type="text/javascript" src="js/superTables/superTables.js"></script><style>.fakeContainer {    margin: 20px;    padding: 0px;    border: none;    width: 640px;    height: 220px;    overflow: hidden;}</style><script type="text/javascript">window.onload=function(){   /* new superTable("demoTable", {        cssSkin : "sSky", //颜色方案        fixedCols : 1 //固定几列    });*/    //cssSkin :  "sDefault", "sSky", "sOrange", "sDark"new superTable("demoTable", {cssSkin : "sOrange",fixedCols : 2,headerRows :1,onStart : function () {   this.start = new Date();},onFinish : function () {   alert("Finished... " + ((new Date()) - this.start) + "ms.");}});};</script></head><body><!--table外必须要有一个DIV包围table样式为fakeContainer的--><div class="fakeContainer"><table id="demoTable"> <tr><th>日账明细ID</th><th>账单类型</th><th>票号</th><th>结算对象ID</th><th>结算对象名称</th><th>账期日期</th><th>企业名称</th><th>订单号</th><th>出账时间</th><th>结算金额</th><th>企业名称</th><th>订单号</th><th>出账时间</th><th>结算金额</th></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr> <tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr><tr>    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td><td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td></tr></table></div></body></html>
效果：
插件下载地址：http://pan.baidu.com/s/1mgNuTde
0 0