你看过 jQuery Datatables http://www.datatables.net/
我最近从 MVCContrib Grid 迁移到 jQuery Datatables。他们非常棒。
这是我们初始化表的方式。
BindTable: function () {
var that = this;
this.Table = $('#sorting-advanced');
var tableStyled = false;
this.Table.dataTable({
'aoColumnDefs': [
{ 'aTargets': [1], 'sType': 'num-html' },
{ 'aTargets': [3], 'sType': 'currency' },
{ 'aTargets': [5], 'bSortable': false, }
],
'sPaginationType': 'full_numbers',
'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
'fnDrawCallback': function (oSettings) {
// Only run once
if (!tableStyled) {
that.Table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select').styleSelect();
tableStyled = true;
}
}
});
},
这是剃刀视图
<table class="table responsive-table" id="sorting-advanced">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Document #</th>
<th scope="col">Tenant</th>
<th scope="col">Amount</th>
<th scope="col" class="align-center">Reconciled</th>
<th scope="col" class="align-center">Actions</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Items)
{
<tr>
<td>@item.Date.ToShortDateString()</td>
<td>
<a href="@Url.Action("Edit", new {id = item.Id})">@item.Number</a>
</td>
<td>@item.Contact.DisplayName</td>
<td>@item.Amount.ToString("C2")</td>
<td class="align-center">
@Html.CheckBoxFor(x => item.Reconciled, new {id = item.Id})
</td>
<td class="align-center vertical-center">
<span class="button-group compact">
<a href="@Url.Action("Edit", new {id = item.Id})"
class="button icon-pencil with-tooltip"
title="Edit Payment"></a>
<a href="#" id="@item.Id"
class="button icon-trash with-tooltip confirm-delete"
title="Delete Payment"></a>
</span>
</td>
</tr>
}
</tbody>
</table>