将jquery数据表过滤器添加到mvc.net页面

时间:2016-11-01 10:23:08

标签: c# jquery asp.net-mvc

如何将jquery dataTable添加到此mvc页面以实现过滤器?我不知道使用哪些参数来初始化dataTable以使用模型中的数据,以及如何在搜索网格上搜索keyup。

<p>
@Html.ActionLink("Create New", "LandingCreate")
</p>
 <table class="table" id="contentTable">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.URL)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.HTMLText)
    </th>
    <th></th>
</tr>

 @foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.URL)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.HTMLText)
    </td>
    <td>
        @Html.ActionLink("Edit", "LandingEdit", new { id = item.Id }) |
        @Html.ActionLink("Delete","LandingDelete",
        new { id = item.Id },
        new { onclick = "return confirm('Are you sure you wish to delete this page?');" })

    </td>
</tr>
 }
  </table>

修改 这是我的脚本部分:

@section Scripts
{
<script>
    var settings = {
            baseParameters: {
                itemsPerPage: pageSettingStorage.defaultItemsPerPage,
                hideColumns: []
            },
            parameters: {
                start: 0,
                search: '',
                firstDate: firstDate,
                lastDate: lastDate,
                status: 'new',
                order: [[0, "asc"]],
            }
    };
    $(document).ready(function () {
        $("#contentTable").DataTable({
            paging: false,
            "ajax": {
                "url": "/Admin/LoadLanding",
                "type": "GET",
                "datatype":"json"
            },
            "columns": {
                "data": "URL",
                "data":"HTMLText"
            }
        });
    });

LoadLanding方法

public ActionResult LoadLanding()
    {
        var model = RepositoryManager.Instanse.LandingContentRepository.SelectAll();
        return Json(new { data = model }, JsonRequestBehavior.AllowGet);
    }

1 个答案:

答案 0 :(得分:0)

将回报更改为:

 public ActionResult LoadLanding()
{
    var model = RepositoryManager.Instanse.LandingContentRepository.SelectAll();
    return Json(new { aaData = model.Select(x => new String[] {
 x.URL,
 x.HTMLText
  })}, JsonRequestBehavior.AllowGet);
}