如何使用 jQuery 数据表插件答案

【问题标题】：How to use jQuery datatable plugin如何使用 jQuery 数据表插件
【发布时间】：2012-03-19 12:15:34
【问题描述】：

我真的是新的 jQuery 和 MVC3，我从 http://datatables.net/ 下载了 jquery 数据表插件，我完全不知道如何实现表。我只是想显示表格，我不在乎上面有什么，我只想先把它放在视图上。任何帮助或建议将不胜感激。

在主视图中，我并不确切知道我需要或不需要哪些脚本：

<h2>About</h2>
@*<script src="../../Scripts/DataTables.js" type="text/javascript"></script>*@
<script src="../../Scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.MetaData.js" type="text/javascript"></script>
@*<script src="../../Scripts/model.column.js" type="text/javascript"></script>
<script src="../../Scripts/model.search.js" type="text/javascript"></script>
<script src="../../Scripts/model.row.js" type="text/javascript"></script>
<script src="../../Scripts/model.ext.js" type="text/javascript"></script>*@
@*<script src="../../Scripts/model.defaults.js" type="text/javascript"></script>
<script src="../../Scripts/model.defaults.columns.js" type="text/javascript"> </script>*@
<link href="../../Content/jquery.dataTables.css" rel="Stylesheet" type="text/css" /> 

<script type="text/javascript">
    $('#usersGrid').dataTable({
        aoData: [{}]
    }); 
</script>

<script type="text/jscript">
    $('#usersGrid').dataTable({
        aoData: [{}]
    }); 
</script>

<table id="table_id">   
    <thead>        
        <tr>            
            <th>Column 1</th>         
            <th>Column 2</th>          
            <th>etc</th>       
        </tr>   
    </thead> 
    <tbody>  
        <tr>       
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>   
            <td>etc</td>   
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td> 
            <td>etc</td>  
       </tr>
    </tbody>
</table>

【问题讨论】：

不熟悉 DataTables，我唯一的意见是您不需要同时包含 jquery.dataTables.js 和 jquery.dataTables.min.js。 “.min”表示它是一个“缩小”版本（相同的脚本被压缩成一个可读性较差但较小的文件，以节省带宽）。所以你可以选择其中一个。
哦，这就是我不知道的事情。真的没有任何好的教程有人实际一步一步地展示如何使用这些 jquery 插件
从示例中的脚本和 css 开始，然后从那里开始工作
bmthrive.com/datatables-jquery-plugin

标签： javascript jquery asp.net-mvc-3 datatables

【解决方案1】：

我一直觉得 DataTables 网站有很好的示例，都有示例代码。不一定有分步说明，但更基本的示例非常简单。

无论如何，以最简单的形式，让 DataTables 工作所需的只是一个有效的 jQuery 对象（当然还有 DataTables 源）。上面代码中的一个问题是您的表的 ID 为 table_id，但您尝试在 ID 为 usersGrid 的表上初始化 dataTables。另外，你应该把初始化代码放在$(document).ready()

我整理了this quick demo给你看。它没有所有花哨的按钮和东西，但基本功能都在那里 - 您可以对列进行排序等。注意表格的 ID 如何对应于 jQuery 选择器。除此之外，您所要做的就是调用.dataTable() 方法：

$(document).ready(function() {
    $('#table_id').dataTable();
});

【讨论】：

【解决方案2】：

对 jquery DataTable 使用 Simple 以下两个脚本

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

使用 Css 添加表格样式

&lt;link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"&gt;

运行jquery函数来显示数据表

<script type="text/javascript" language="javascript" class="init">
    $(document).ready(function() {$('#TABLE_ID').dataTable({'iDisplayLength': 2,//Set Row Per Page
    "bFilter": false,//Remove Search
    "bPaginate" : false,//Remove Pagination
    "bInfo": false,//Remove Page Info
    "bLengthChange":false,//Show per Page Dropdown Remove
    "columnDefs": [ { "targets": 0, "orderable": false } ],//Remove Colum Orderable(Here Col 0 Remove)
    "aoColumns": [{ "asSorting": [] },{ "asSorting": [ "asc" ] },{ "asSorting": [ "desc", "asc" ] },{ "asSorting": [ "desc" ] },null],//Set Colum Order By ASC Or DSC
    "sPaginationType": "full_numbers"//Full Pagination
    });
    });
</script>

为应用 jquery 数据表创建表。

&lt;table id="TABLE_ID"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Position&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tfoot&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Position&lt;/th&gt;&lt;/tr&gt;&lt;/tfoot&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Tiger Nixon&lt;/td&gt;&lt;td&gt;System Architect&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Garrett Winters&lt;/td&gt;&lt;td&gt;Accountant&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Ashton Cox&lt;/td&gt;&lt;td&gt;Junior Technical Author&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Cedric Kelly&lt;/td&gt;&lt;td&gt;Senior Javascript Developer&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;

这里创建表必须用户<thead>和<tbody>Tag才能在表中应用jQuery。

【讨论】：

【解决方案3】：

以下示例可以满足您的要求，其中显示了相关的 js 和 css 文件。在这我也使用第三个 css 文件的 jQuery 主题。前两个css文件可以从datatables下载，第三个可以从jQuery官网下载。

<head>
<link href="../css/table_sort_page.css" rel="stylesheet" type="text/css" />
<link href="../css/table_sort_jui.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/cupertino/jquery.ui.all.css" rel="stylesheet" type="text/css"/>

<script src="../js/jquery-1.6.2.js" type="text/javascript"></script>    
<script src="../css/ui/jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
<script src="../js/jquery.dataTables.js" type="text/javascript" ></script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#table_id").dataTable({
      "bJQueryUI": true,
      "aoColumns": [{ "bSortable": true }, { "bSortable": true }]
    });      
  });
</script>
</head>

<body>
<table id="table_id">   
<thead>        
    <tr>            
        <th>Column 1</th>         
        <th>Column 2</th>          
        <th>etc</th>       
    </tr>   
</thead> 
<tbody>  
    <tr>       
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>   
        <td>etc</td>   
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td> 
        <td>etc</td>  
   </tr>
</tbody>
</table> 
</body>

【讨论】：

【解决方案4】：

我正在使用 jquery 数据表服务器端。

$('#sample-data-table').DataTable({   
    "destroy": true,   
    "processing": false,   
    "serverSide": true,   
    "searching": true,   
    "oLanguage": {   
        "sEmptyTable": "No client available."    
    },    
    "lengthMenu": [    
        [10, 20, 50, -1],    
        [10, 20, 50, "All"]   
    ],   
    "order": [],   
})

当我从服务器端通过 OrderByDescending 获取时，它将对列表进行排序。但是当我添加新记录并再次初始化数据表时，最后插入的记录不在列表的顶部。

【讨论】：