Bootstrap表服务器端分页和搜索功能

时间:2018-07-15 16:13:05

标签: c# jquery json twitter-bootstrap model-view-controller

如何在引导表和搜索功能上实现服务器端分页?现在我正在使用客户端,我想更改为服务器端。我正在使用MVC C#,我想部分根据用户单击的分页页面从控制器检索数据。

我当前的代码:

var data = [
    @for (int i = 0; i < ((List<Project.Models.Program.Persona>)Model.data).Count(); i++)
    {
        Project.Models.Program.Persona a = ((List<Project.Models.Program.Persona>)Model.data)[i];
        @(i > 0 ? "," : string.Empty)<text>{"ID":@a.ID,"Owner":"@a.Owner","archived":"@a.ArchiveDate","modified:"@a.Modified","Organisation": "@a.Organization","Status": "@Html.Raw(a.Status)","Report": "@Html.Raw(a.Report)", "Action": "@Html.Raw(a.Action)"}</text>
    }
];

var $table = $('#table');
var prevSize=0;

$(function () {
    $table.bootstrapTable({
        data : data,
        locale : "en-us,
        pagination: true,
        pageList: "[10, 20, 50, 100, ALL]",
        search: true,
        showColumns : true,
        showToggle : true,
        toolbar : "#toolbar",
        sortable : true,
        columns:
           [
            {
                field: "ID",title: "Id",rowspan: 2,align: "left",sortable : true
            },
            {
                field :"Organisation",title: "Organisation",colspan: 2,align: "left"
            },
            {},.......soo on 
            }
            ]

结果应类似于:

{
   "ID":237,
   "Owner":"David",
   "Archived":"False",
   "Modified":"2018-07-13",
   "Organization":"TCS",
   "Status":"Complete",
   "Report":"<a href='/Personalinfo/downloadreport/?responseID=237' class='btn-pdf' download> PDF</a>",
   "Action":"<a href='/user/edit?id=237'>Edit</a> &#124; <a data-toggle='modal' data-target='#myPopup' data-backdrop='static' href='/user/reassign?id=237'>Reassign</a> &#124; <a data-toggle='modal' data-target='#myPopup' data-backdrop='static' href='/user/archive?id=237'>Archive</a>"
}

0 个答案:

没有答案