How to use jQuery datatable plugin

Question

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>

Being unfamiliar with DataTables, the only comment I have is that you don't need to include both jquery.dataTables.js and jquery.dataTables.min.js. The ".min" denotes that it is a "minified" version (the same script compacted into a less readable but smaller file, to save bandwidth). So you can pick one or the other. — Dan A.
– Dan A., Commented Mar 1, 2012 at 0:25
oh well thx thats something i didn't know. There really isn't any good tutorials anywhere where someone actually shows step by step how to use these jquery plugins — TMan
– TMan, Commented Mar 1, 2012 at 0:27
start with just the scripts and css from examples and work from there — charlietfl
– charlietfl, Commented Mar 1, 2012 at 0:28

Colin Brock · Accepted Answer · 2012-03-01 02:45:11Z

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

himansu · Accepted Answer · 2014-07-03 09:58:31Z

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

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

Run jquery function for display datatable

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

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

Mahbub · Accepted Answer · 2012-08-31 10:11:20Z

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.

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

Gobind Gupta · Accepted Answer · 2018-02-18 00:08:06Z

i am using jquery datatable server side.

$('#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.

Benjamin M. Reed · Accepted Answer · 2024-11-28 22:00:58Z

I am currently using this in an ASP.Net RazorPages app with good results so far. my big requirement is having the flow of data when sorting, searching and cycling through the pages remain smooth and not lockup. like Colin Brock, I believe that simplicity is the best way to start and once started, the layers can be added. My two cents: I found that in the asp.net mvc/web api, the jquery ready function is best at the end of the page just inside the closing body tag. the css link and script includes are in the head or just above the before the script block Ive seen it both ways.

<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {
        $('#dataTable').DataTable({
            paging: true,        // Enables pagination
            searching: true,     // Enables search
            ordering: true,      // Enables sorting
            info: true           // Enables table information (e.g., "Showing 1 to 10 of 100 entries")
        });
    });
</script>

the table:

<table id="dataTable" class="table table-striped">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.Items[0].field1)</th>
            <th>@Html.DisplayNameFor(model => model.Items[0].field2)</th>
            <th>@Html.DisplayNameFor(model => model.Items[0].field3)</th>
            <th>@Html.DisplayNameFor(model => model.Items[0].field4)</th>
            <th>@Html.DisplayNameFor(model => model.Items[0].field5)</th>
            <th>@Html.DisplayNameFor(model => model.Items[0].field6)</th>
            <th>@Html.DisplayNameFor(model => model.Items[0].field7)</th>
            <th>@Html.DisplayNameFor(model => model.Items[0].field8)</th>           
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Items)
        {
            <tr>
                <td>@item.field1</td>
                <td>@item.field2</td>
                <td>@item.field3</td>
                <td>@item.field4</td>
                <td>@item.field5</td>
                <td>@item.field6</td>
                <td>@item.field7</td>
                <td>@item.field8</td>
                <td>
                    <a href="#">Select</a> | <a href="#">Queue</a>
                </td>
            </tr>
        }
    </tbody>
</table>

Collectives™ on Stack Overflow

How to use jQuery datatable plugin

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related