javascriptjqueryasp.net-mvc-3datatables

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.

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> 

Solution

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

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

    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:

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