如何将 JQuery Datatable.net 与 ASP.Net 4 Razor 和 Twitter Bootstrap 一起使用
Posted
技术标签:
【中文标题】如何将 JQuery Datatable.net 与 ASP.Net 4 Razor 和 Twitter Bootstrap 一起使用【英文标题】：How to use JQuery Datatable.net with ASP.Net 4 Razor and Twitter Bootstrap 【发布时间】：2013-05-22 10:28:39 【问题描述】：我想将 jQuery Datatable 与 ASP.net MVC 和 Twitter 引导程序一起使用。
有人已经这样做了吗？
【问题讨论】：
【参考方案1】：这可能是一篇旧帖子，但我只是想补充一下我是如何设置的。好像比上面的codea做的要容易。
1) 在您看来，只需像平常一样创建您的表（使用@foreach 或类似的东西）并为其指定一个ID 为jqueryTable。然后下载以下3个文件，分别放在~/Scripts/和~/Content/文件夹中：
dataTables.bootstrap.css
jquery.dataTables.js
dataTables.bootstrap.js
现在使用以下代码将这些文件添加到您的 BundleConfig.cs 文件中：
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"));
最后，将以下内容添加到您创建表的视图中（注意 JS 文件顺序很重要！）：
@Styles.Render("~/Content/datatables")
@section Scripts
@Scripts.Render("~/Scripts/datatables")
<script type="text/javascript" language="javascript">
/* Table initialization */
$(document).ready(function()
$('#jqueryTable').dataTable();
);
</script>
上面的 JS 代码只是找到你的表（ID 为jqueryTable）并在上面初始化数据表 JS。此外，要使其正常工作，~/bundles/jquery 需要包含在您的 _Layout.cshtml 文件中（默认情况下应该包含该文件）。
【讨论】：
【参考方案2】：我主要从那里启发了我的解决方案，感谢作者：http://www.datatables.net/blog/Twitter_Bootstrap_2
您需要做的是将帖子中给出的 javascipt 放入一个 js 文件中，并将您的 CSS 放入 tables.less 文件中（假设您使用 less 作为您的 css，如果您不只是将 CSS 放入你的 bootstrap.css 文件）：
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="#">← ' + oLang.sPrevious + '</a></li>' +
'<li class="next disabled"><a href="#">' + 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="#">' + 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"
);
要插入到 tables.less 或 bootstrap.css 中的 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('@imagesPathsort_both.png') no-repeat center right;
table.table thead .sorting_asc background: url('@imagesPathsort_asc.png') no-repeat center right;
table.table thead .sorting_desc background: url('@imagesPathsort_desc.png') no-repeat center right;
table.table thead .sorting_asc_disabled background: url('@imagesPathsort_asc_disabled.png') no-repeat center right;
table.table thead .sorting_desc_disabled background: url('@imagesPathsort_desc_disabled.png') no-repeat center right;
然后您可以像这样在您的 ASP.net 剃须刀页面 .cshtml 中构建您的表格
@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>
希望这会有所帮助！
【讨论】：
以上是关于如何将 JQuery Datatable.net 与 ASP.Net 4 Razor 和 Twitter Bootstrap 一起使用的主要内容，如果未能解决你的问题，请参考以下文章
DataTable.NET 使用server-side processing
C#如何将.OrderBy与多列一起使用并将列号解码为列名？