dataTable固定列固定行

直接贴代码

引入样式文件

        
        <link type="text/css" href="css/fixedColumns.bootstrap.css" />
        <link type="text/css" href="css/fixedColumns.dataTables.css" />
        
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/jquery.dataTables.js"></script>
        <script src="js/dataTables.fixedColumns.js"></script>

 

table 为

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>姓</th>
            <th>名字</th>
            <th>住址</th>
            <th>办公地址</th>
            <th>年龄</th>
            <th>开始日期</th>
            <th>收入水平</th>
            <th>备注</th>
            <th>邮箱</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Garrett</td>
            <td>Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
            <td>8422</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Ashton</td>
            <td>Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
            <td>1562</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Cedric</td>
            <td>Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
            <td>6224</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Airi</td>
            <td>Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
            <td>5407</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Brielle</td>
            <td>Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
            <td>4804</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Herrod</td>
            <td>Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$137,500</td>
            <td>9608</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Rhona</td>
            <td>Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$327,900</td>
            <td>6200</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Colleen</td>
            <td>Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$205,500</td>
            <td>2360</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Sonya</td>
            <td>Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$103,600</td>
            <td>1667</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Jena</td>
            <td>Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td