I want to use the jQuery Datatable with ASP.net MVC and Twitter bootstrap.
Does anyone have already done this ?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
This may be an old post but I just wanted to add how I got things set up. It seems to be easier than how codea did it above.
1) In your view, simply create your table like normal (with a @foreach or some such thing) and give it an ID of jqueryTable. Then download the following 3 files and put them in the ~/Scripts/ and the ~/Content/ folders:
Now add those files to your BundleConfig.cs file using the following code:
bundles.Add(new ScriptBundle("~/Scripts/datatables").Include(
"~/Scripts/jquery.dataTables.js",
"~/Scripts/dataTables.bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/datatables").Include(
"~/Content/dataTables.bootstrap.css"));
Finally, add the following to the view where you created your table (note that the JS file order matters!):
@Styles.Render("~/Content/datatables")
@section Scripts {
@Scripts.Render("~/Scripts/datatables")
<script type="text/javascript" language="javascript">
/* Table initialization */
$(document).ready(function() {
$('#jqueryTable').dataTable();
});
</script>
}
The JS code above simply finds your table (with an ID of jqueryTable) and initializes the datatables JS on it. Also, for this to work, the ~/bundles/jquery will need to be included in your _Layout.cshtml file (which it should be by default).
Method 2
I have mainly inspired my solution from there, thanks to the author: http://www.datatables.net/blog/Twitter_Bootstrap_2
What you have to do is to put the javascipt given in the post into a js file and your CSS into the tables.less file (this is assuming you are using less for your css, if you dont just drop the CSS into your bootstrap.css file) :
jquery.dataTables.twitterbootstrap.js
/* Set the defaults for DataTables initialisation */
$.extend(true, $.fn.dataTable.defaults, {
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
});
/* Default class modification */
$.extend($.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
});
/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": oSettings._iDisplayLength === -1 ?
0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
};
};
/* Bootstrap style pagination control */
$.extend($.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function (oSettings, nPaging, fnDraw) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function (e) {
e.preventDefault();
if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
fnDraw(oSettings);
}
};
$(nPaging).addClass('pagination').append(
'<ul>' +
'<li class="prev disabled"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">← ' + oLang.sPrevious + '</a></li>' +
'<li class="next disabled"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">' + oLang.sNext + ' → </a></li>' +
'</ul>'
);
var els = $('a', nPaging);
$(els[0]).bind('click.DT', { action: "previous" }, fnClickHandler);
$(els[1]).bind('click.DT', { action: "next" }, fnClickHandler);
},
"fnUpdate": function (oSettings, fnDraw) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, ien, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
if (oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if (oPaging.iPage <= iHalf) {
iStart = 1;
iEnd = iListLength;
} else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
for (i = 0, ien = an.length; i < ien; i++) {
// Remove the middle elements
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
// Add the new list items and their event handlers
for (j = iStart; j <= iEnd; j++) {
sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
$('<li ' + sClass + '><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">' + j + '</a></li>')
.insertBefore($('li:last', an[i])[0])
.bind('click', function (e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
fnDraw(oSettings);
});
}
// Add / remove disabled classes from the static elements
if (oPaging.iPage === 0) {
$('li:first', an[i]).addClass('disabled');
} else {
$('li:first', an[i]).removeClass('disabled');
}
if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
$('li:last', an[i]).addClass('disabled');
} else {
$('li:last', an[i]).removeClass('disabled');
}
}
}
}
});
/*
* TableTools Bootstrap compatibility
* Required TableTools 2.1+
*/
if ($.fn.DataTable.TableTools) {
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend(true, $.fn.DataTable.TableTools.classes, {
"container": "DTTT btn-group",
"buttons": {
"normal": "btn",
"disabled": "disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
},
"print": {
"info": "DTTT_print_info modal"
},
"select": {
"row": "active"
}
});
// Have the collection use a bootstrap compatible dropdown
$.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
});
}
CSS to insert into tables.less OR into bootstrap.css
table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
cursor: pointer;
*cursor: hand;
}
table.table thead .sorting { background: url('@{imagesPath}sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('@{imagesPath}sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('@{imagesPath}sort_desc.png') no-repeat center right; }
table.table thead .sorting_asc_disabled { background: url('@{imagesPath}sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('@{imagesPath}sort_desc_disabled.png') no-repeat center right; }
Then you can build your table in your ASP.net razor page .cshtml like this
@model IEnumerable<Data>
@{
ViewBag.Title = "Datatable example";
}
<h2 class="text-info">Datatable Example</h2>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="jqueryTable">
<thead>
<tr class="text-info">
<th>ID</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
@foreach (var object in Model)
{
<tr >
<td style="min-width: 30px">
@object.ID
</td>
<td style="min-width: 140px">
@object.Name
</td>
<td>
@object.Value
</td>
</tr>
}
</tbody>
</table>
@section scripts
{
<script type="text/javascript" language="javascript" src="~/scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="~/scripts/jquery.dataTables.twitterbootstrap.js"></script>
<script type="text/javascript">
/* Table initialisation */
$(document).ready(function () {
$('#jqueryTable').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"aaSorting": [ ],
"sPaginationType": "bootstrap",
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"oLanguage": {
"sLengthMenu": "_MENU_ values per page"
}
});
});
</script>
}
Hope this helps !
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0