jquery-table-fixed-header
Version:
A jQuery plugin to make table header fixed on the top when scrolling down.
570 lines (513 loc) • 11.6 kB
HTML
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link href="css/default.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<h1>In the document</h1>
<table class="gridview" cellspacing="0" rules="all" border="1" id="table1">
<thead>
<tr>
<th class="center" scope="col"><input type="checkbox" class="select" name="InvoiceID"/></th>
<th scope="col">InvoiceID</th>
<th scope="col">BillID</th>
<th scope="col">CustomerID</th>
<th scope="col">Amount</th>
<th scope="col">InvoiceNo</th>
<th scope="col">InvoiceDate</th>
<th scope="col">CertNO</th>
<th scope="col">Status</th>
<th scope="col">CheckoffAmount</th>
<th scope="col">EmsNO</th>
<th scope="col">EmsDate</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="1"/></td>
<td>1</td><td>0001</td>
<td>1</td>
<td>100.00</td>
<td>invoice0001</td>
<td>2014/1/1 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems001</td>
<td>2013/12/1 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="2"/></td>
<td>2</td>
<td>0001</td>
<td>1</td>
<td>200.00</td>
<td>invoice0002</td>
<td>2014/1/2 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems002</td>
<td>2013/12/2 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="3"/></td>
<td>3</td>
<td>0002</td>
<td>2</td>
<td>300.00</td>
<td>invoice0003</td>
<td>2014/1/3 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems003</td>
<td>2013/12/3 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="4"/></td>
<td>4</td>
<td>0003</td>
<td>3</td>
<td>400.00</td>
<td>invoice0004</td>
<td>2014/1/4 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems004</td>
<td>2013/12/4 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="11"/></td>
<td>11</td>
<td>0001</td>
<td>1</td>
<td>100.00</td>
<td>invoice0001</td>
<td>2014/1/1 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems001</td>
<td>2013/12/1 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="12"/></td>
<td>12</td>
<td>0001</td>
<td>1</td>
<td>200.00</td>
<td>invoice0002</td>
<td>2014/1/2 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems002</td>
<td>2013/12/2 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="13"/></td>
<td>13</td>
<td>0002</td>
<td>2</td>
<td>300.00</td>
<td>invoice0003</td>
<td>2014/1/3 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems003</td>
<td>2013/12/3 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="14"/></td>
<td>14</td>
<td>0003</td>
<td>3</td>
<td>400.00</td>
<td>invoice0004</td>
<td>2014/1/4 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems004</td>
<td>2013/12/4 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="15"/></td>
<td>15</td>
<td>0001</td>
<td>1</td>
<td>100.00</td>
<td>invoice0001</td>
<td>2014/1/1 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems001</td>
<td>2013/12/1 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="16"/></td>
<td>16</td>
<td>0001</td>
<td>1</td>
<td>200.00</td>
<td>invoice0002</td>
<td>2014/1/2 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems002</td>
<td>2013/12/2 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="17"/></td>
<td>17</td>
<td>0002</td>
<td>2</td>
<td>300.00</td>
<td>invoice0003</td>
<td>2014/1/3 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems003</td>
<td>2013/12/3 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="18"/></td>
<td>18</td>
<td>0003</td>
<td>3</td>
<td>400.00</td>
<td>invoice0004</td>
<td>2014/1/4 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems004</td>
<td>2013/12/4 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="19"/></td>
<td>19</td>
<td>0001</td>
<td>1</td>
<td>100.00</td>
<td>invoice0001</td>
<td>2014/1/1 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems001</td>
<td>2013/12/1 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="20"/></td>
<td>20</td>
<td>0001</td>
<td>1</td>
<td>200.00</td>
<td>invoice0002</td>
<td>2014/1/2 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems002</td>
<td>2013/12/2 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="21"/></td>
<td>21</td>
<td>0002</td>
<td>2</td>
<td>300.00</td>
<td>invoice0003</td>
<td>2014/1/3 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems003</td>
<td>2013/12/3 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="1"/></td>
<td>1</td>
<td>0001</td>
<td>1</td>
<td>100.00</td>
<td>invoice0001</td>
<td>2014/1/1 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems001</td>
<td>2013/12/1 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="2"/></td>
<td>2</td>
<td>0001</td>
<td>1</td>
<td>200.00</td>
<td>invoice0002</td>
<td>2014/1/2 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems002</td>
<td>2013/12/2 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="3"/></td>
<td>3</td>
<td>0002</td>
<td>2</td>
<td>300.00</td>
<td>invoice0003</td>
<td>2014/1/3 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems003</td>
<td>2013/12/3 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="4"/></td>
<td>4</td>
<td>0003</td>
<td>3</td>
<td>400.00</td>
<td>invoice0004</td>
<td>2014/1/4 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems004</td>
<td>2013/12/4 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="11"/></td>
<td>11</td>
<td>0001</td>
<td>1</td>
<td>100.00</td>
<td>invoice0001</td>
<td>2014/1/1 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems001</td>
<td>2013/12/1 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="12"/></td>
<td>12</td>
<td>0001</td>
<td>1</td>
<td>200.00</td>
<td>invoice0002</td>
<td>2014/1/2 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems002</td>
<td>2013/12/2 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="13"/></td>
<td>13</td>
<td>0002</td>
<td>2</td>
<td>300.00</td>
<td>invoice0003</td>
<td>2014/1/3 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems003</td>
<td>2013/12/3 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="14"/></td>
<td>14</td>
<td>0003</td>
<td>3</td>
<td>400.00</td>
<td>invoice0004</td>
<td>2014/1/4 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems004</td>
<td>2013/12/4 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="15"/></td>
<td>15</td>
<td>0001</td>
<td>1</td>
<td>100.00</td>
<td>invoice0001</td>
<td>2014/1/1 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems001</td>
<td>2013/12/1 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="16"/></td>
<td>16</td>
<td>0001</td>
<td>1</td>
<td>200.00</td>
<td>invoice0002</td>
<td>2014/1/2 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems002</td>
<td>2013/12/2 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="17"/></td>
<td>17</td>
<td>0002</td>
<td>2</td>
<td>300.00</td>
<td>invoice0003</td>
<td>2014/1/3 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems003</td>
<td>2013/12/3 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="18"/></td>
<td>18</td>
<td>0003</td>
<td>3</td>
<td>400.00</td>
<td>invoice0004</td>
<td>2014/1/4 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems004</td>
<td>2013/12/4 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="19"/></td>
<td>19</td>
<td>0001</td>
<td>1</td>
<td>100.00</td>
<td>invoice0001</td>
<td>2014/1/1 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems001</td>
<td>2013/12/1 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="20"/></td>
<td>20</td>
<td>0001</td>
<td>1</td>
<td>200.00</td>
<td>invoice0002</td>
<td>2014/1/2 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems002</td>
<td>2013/12/2 0:00:00</td>
</tr>
<tr>
<td class="center"><input type="checkbox" class="select" name="InvoiceID" value="21"/></td>
<td>21</td>
<td>0002</td>
<td>2</td>
<td>300.00</td>
<td>invoice0003</td>
<td>2014/1/3 0:00:00</td>
<td> </td>
<td>0</td>
<td>0.00</td>
<td>ems003</td>
<td>2013/12/3 0:00:00</td>
</tr>
</table>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<p>text ...</p>
<script type="text/javascript" src="js/require.js"></script>
<!--<script language="JavaScript" type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>-->
<script language="JavaScript" type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
require(['../dist/jquery-table-fixed-header'],function($){
$(function ($) {
$('#table1').tableFixedHeader();
});
});
</script>
</body>
</html>