How to use jQuery datatable plugin

I'm really new jQuery and MVC3, I downloaded the jquery datatable plugin from http://datatables.net/ and I'm completely confused on how to implement the table. I'm just trying to display the table, I don't care whats on it, I just would like to get it up on the view first. Any help or advice would be appreciated.

我是新的jQuery和MVC3,我从http://datatables.net/下载了jquery datatable插件,我对如何实现表格感到困惑。我只是想展示桌子,我不在乎它是什么,我只是想先把它放在视图上。任何帮助或建议将不胜感激。

In the main view, I don't know exactly what scripts I need or don't need:

在主视图中,我不确切知道我需要或不需要的脚本:

<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>

5 个解决方案

#1

I've always felt that the DataTables website had pretty good examples, all with sample code. There aren't step-by-step directions, necessarily, but the more basic examples are pretty straightforward.

我一直认为DataTables网站有很好的例子,都有示例代码。没有必要的逐步指导,但更基本的例子非常简单。

Regardless, in its simplest form, all you need to get DataTables working is a valid jQuery object (and the DataTables source, of course). One problem in your code above is that your table has an ID of table_id, yet you're trying to initialize dataTables on a table with an ID of usersGrid. Also, you should put the initialization code within $(document).ready()

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

I put together this quick demo for you to look at. It doesn't have all the fancy buttons and things, but the basic functionality is all there - you can sort columns, etc. Notice how the ID of the table corresponds to the jQuery selector. Other than that, all you have to do is call the .dataTable() method:

我把这个快速演示放在一起让你看看。它没有所有花哨的按钮和东西,但基本功能就在那里 - 你可以对列进行排序等。注意表的ID如何对应于jQuery选择器。除此之外,您所要做的就是调用.dataTable()方法:

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

#2

Use Simple Following two script for jquery 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>

Use Css For add style of tabel

使用Css添加表格样式

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

Run jquery function for display datatable

运行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>

Create Table For apply jquery datatable.

创建表格以应用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>

Here create Table must User <thead> and <tbody>Tag for apply jQuery in Table.

这里创建表必须用户和标签在表中应用jQuery。

#3

The following example may fulfill your requirements which shows the relevant js and css files. In this I am also using jQuery theme for which the third css file is used. You can download first two css files from datatables and the third one from jQuery official web site itself.

以下示例可能满足您的要求,显示相关的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>

#4

You have some description in the Enhancing-HTML-tables-using-a-JQuery-DataTables-pl . However, if you want live examples it would be best to use datatables site.

您在Enhancing-HTML-tables-using-a-JQuery-DataTables-pl中有一些描述。但是,如果您想要实时示例,最好使用datatables站点。

Jovan

#5

i am using jquery datatable server side.

我正在使用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": [],   
})

it will sort the list as i am getting from server-side by OrderByDescending. but when i add new record and initialize the datatable again, then the last inserted record is not coming on top in the list.

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

#1