bootstrap表格分页

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>

<script src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

  <div class="panel-body" style="padding-bottom:0px;">
        <div class="tableWrap">
            <div class="cxbottom"><button type="submit" class="cxbtn" onclick="Search();">查 询</button></div>
            <table width="100%" border="0">
                <tr>
                    <th width="12%">活动日期：</th>
                    <td width="21%">
                        <div class="" id="data_5">
                            <div class="input-daterange input-group" id="datepicker">
                                <input type="text" class="input-sm form-control" name="start" value="2014-11-11" />
                                <span class="input-group-addon">到</span>
                                <input type="text" class="input-sm form-control" name="end" value="2014-11-17" />
                            </div>
                        </div>

                    </td>
                    <th width="12%">活动名称：</th>
                    <td width="21%">
                        <input type="text" placeholder="" class="form-control" style="border-radius:3px; height:30px" id="activeName">
                    </td>
                    <th width="12%">是否推荐：</th>
                    <td width="22%"><input type="checkbox" class="js-switch" checked /></td>
                </tr>
                <tr>
                    <th>活动名称：</th>
                    <td><input type="text" placeholder="" class="form-control" style="border-radius:3px; height:30px"></td>
                    <th>是否上线：</th>
                    <td><input type="text" placeholder="" class="form-control" style="border-radius:3px; height:30px" id="online"></td>

                </tr>
            </table>
        </div>

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-form">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
  <table id="tb_departments"></table>

　　

  var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#tb_departments').bootstrapTable({
                    url: '/Active/ActivityS',         //请求后台的URL（*）
                    method: 'post',                      //请求方式（*）
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                       //初始化加载第一页，默认第一页
                    pageSize: 10,                       //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,
                    showColumns: true,                  //是否显示所有的列
                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    clickToSelect: true,                //是否启用点击选中行
                    //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "ActivityGuid",                     //每一行的唯一标识，一般为主键列
                    showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                   //是否显示父子表
                    columns: [{
                        checkbox: true
                    },
                    {
                        field: 'ActivityGuid',
                        title: '活动报名主键'
                    },
                    {
                        field: 'Name',
                        title: '活动名称'
                    }, {
                        field: 'Introduction',
                        title: '活动简介'
                    }, {
                        field: 'StartDateTime',
                        title: '活动开始时间'
                    }, {
                        field: 'EndDateTime',
                        title: '活动结束时间'
                    },
                    {
                        field: 'TotalPlaces',
                        title: '活动总名额'
                    },
                    {
                        field: 'ActivityType',
                        title: '活动类型'
                    },
                    {
                        field: 'AccountGuid',
                        title: '操作人'
                    },
                     {
                         field: 'isLine',
                         title: '是否上线'
                     },
                    {
                        field: 'isMail',
                        title: '是否邮寄'
                    },
                    ]
                });
            };

            //得到查询的参数
            oTableInit.queryParams = function (params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    limit: params.limit,   //页面大小
                    offset: params.offset,  //页码
                    departmentname: "aa",
                    statu: "true",
                    search: params.search
                };
                return temp;
            };
            return oTableInit;
        };

        var ButtonInit = function () {
            var oInit = new Object();
            var postdata = {};

            oInit.Init = function () {
                //初始化页面上面的按钮事件
            };
            return oInit;
        };

　　后台对应的方法

 [HttpPost]
        public ActionResult ActivityS(int limit, int offset, string activeName, string online, string search)
        {
            var list = new List<Activitys>();
            DataTable dt = bll.GetActivity();
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                Activitys model = new Activitys();
                model.ActivityGuid = dt.Rows[i]["ActivityGuid"].ToString();
                model.Name = dt.Rows[i]["Name"].ToString();
                model.Introduction = dt.Rows[i]["Introduction"].ToString();

                model.StartDateTime = Convert.ToDateTime(dt.Rows[i]["StartDateTime"]);
                model.EndDateTime = Convert.ToDateTime(dt.Rows[i]["EndDateTime"]);

                model.TotalPlaces = Convert.ToInt32(dt.Rows[i]["TotalPlaces"]);
                model.ActivityType = Convert.ToInt32(dt.Rows[i]["ActivityType"]);
                model.AccountGuid = dt.Rows[i]["AccountGuid"].ToString();
                model.isLine = dt.Rows[i]["isLine"].ToString() == "1" ? false : true;
                model.isMail = dt.Rows[i]["isMail"].ToString() == "1" ? false : true;
                list.Add(model);
            }
            //去除时间带T
            var iso = new IsoDateTimeConverter();
            iso.DateTimeFormat = "yyyy-MM-dd";

            var pageCount = dt.Rows.Count;
            var rows = list.Skip(offset).Take(limit).ToList();
            return Content(JsonConvert.SerializeObject(new { total = pageCount, rows = rows }, iso));

　　最终的效果

　　方便以后可以用到。