jquery表格排序插件DataTables

所属分类：UI-图表,筛选及排序

59151 371 查看评论 (11)

分享到微信朋友圈

查看演示立即下载

插件描述：Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

引用文件

--js

<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/jquery.dataTables.js"></script>

--css

<link rel="stylesheet" href="css/jquery.dataTables.css" />

dome格式

<html>
 <head></head>
 <body>
  <div class="TabBox">
    <table class="data-table" width="100%">
      <thead>
        <tr>
          <th class="nosort">Rendering engine</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Trident</td>
          <td>Internet
            Explorer 4.0</td>
          <td>Win 95+</td>
          <td>4</td>
        </tr>
        <tr>
          <td>Trident</td>
          <td>Internet
            Explorer 5.0</td>
          <td>Win 95+</td>
          <td>5</td>
        </tr>
        <tr>
          <td>Trident</td>
          <td>Internet
            Explorer 5.5</td>
          <td>Win 95+</td>
          <td>5.5</td>
        </tr>
        <tr>
          <td>Trident</td>
          <td>Internet
            Explorer 6</td>
          <td>Win 98+</td>
          <td>6</td>
        </tr>
      </tbody>
    </table>
</div><!--TabBox-->
<script>
$(document).ready(function(){
    $('.data-table').dataTable({
        "searching": false,  //是否允许Datatables开启本地搜索
        "paging": false,  //是否开启本地分页
        "lengthChange": false,  //是否允许用户改变表格每页显示的记录数
        "info": false,   //控制是否显示表格左下角的信息
        "columnDefs": [{
            "targets": 'nosort',  //列的样式名
            "orderable": false    //包含上样式名‘nosort’的禁止排序
        }],
        //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
        "order": [3]  //asc升序   desc降序  "order": [[ 3, "desc" ]]默认第四列为降序排列
    });
});
</script>
</body>
</html>

jQuery简单的真心话大冒险游戏文字随机抽取大冒险

3D元素周期表