[英]How to use jQuery datatable plugin
我是新的jQuery和MVC3,我從http://datatables.net/下載了jquery datatable插件,我對如何實現表格感到困惑。 我只是想展示桌子,我不在乎它是什么,我只想先把它放在視圖上。 任何幫助或建議將不勝感激。
在主視圖中,我不確切知道我需要或不需要的腳本:
<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網站有很好的例子,都有示例代碼。 沒有必要的逐步指導,但更基本的例子非常簡單。
無論如何,以最簡單的形式,讓DataTables工作所需的只是一個有效的jQuery對象(當然還有DataTables源)。 上面代碼中的一個問題是您的表的ID為table_id
,但您嘗試在ID為usersGrid
的表上初始化dataTable。 此外,您應該將初始化代碼放在$(document).ready()
我把這個快速演示放在一起讓你看看。 它沒有所有花哨的按鈕和東西,但基本功能就在那里 - 你可以對列進行排序等。注意表的ID如何對應於jQuery選擇器。 除此之外,您所要做的就是調用.dataTable()
方法:
$(document).ready(function() {
$('#table_id').dataTable();
});
使用Simple為jquery DataTable提供以下兩個腳本
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
使用Css添加表格樣式
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
運行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數據表。
<table id="TABLE_ID"><thead><tr><th>Name</th><th>Position</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th></tr></tfoot><tbody><tr><td>Tiger Nixon</td><td>System Architect</td></tr><tr><td>Garrett Winters</td><td>Accountant</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td></tr></tbody></table>
這里創建表必須用戶<thead>
和<tbody>
標簽在表中應用jQuery。
以下示例可能滿足您的要求,顯示相關的js和css文件。 在這里我也使用jQuery主題,使用第三個css文件。 您可以從下載前兩個css文件數據表 ,第三個從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>
我正在使用jquery datatable服務器端。
$('#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從服務器端獲取的列表進行排序。 但是當我添加新記錄並再次初始化數據表時,最后插入的記錄不會出現在列表的頂部。
您在Enhancing-HTML-tables-using-a-JQuery-DataTables-pl中有一些描述。 但是,如果您想要實時示例,最好使用datatables站點。
約萬
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.