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>
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();
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With