• Bootstrap table 分页 In asp.net MVC


    中文翻译文档:

    http://blog.csdn.net/rickiyeat/article/details/56483577

    版本说明:

    Jquery v2.1.1

    Bootstrap V3.3.7

    bootstrap-table V1.11.1

    一、视图页

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title>测试</title>
     6     <link href="/Content/bootstrap.min.css" rel="stylesheet">
     7     <link href="/Content/bootstrap-table.min.css" rel="stylesheet">
     8     <script src="/Scripts/modernizr-2.8.3.js"></script>
     9 </head>
    10 <body>
    11     <div class="container">
    12         <div class="row">
    13             <div id="test_toolbar" class="btn-group">
    14                 <button id="btnEdit" type="button" class="btn btn-default">
    15                     <span class="fa fa-pencil-square-o" aria-hidden="true"></span>批量显示
    16                 </button>
    17                 <button id="btnDelete" type="button" class="btn btn-default">
    18                     <span class="fa fa-trash-o" aria-hidden="true"></span>批量删除
    19                 </button>
    20             </div>
    21             <table id="test_Table" class="table-striped table-hover" data-reorderable-columns="true"></table>
    22         </div>
    23     </div>
    24     <script src="/Scripts/jquery/jquery-2.1.1.min.js"></script>
    25     <script src="/Scripts/bootstrap.min.js"></script>
    26     <script src="/Scripts/respond.min.js"></script>
    27     <script src="/Scripts/bootstrap-table.min.js"></script>
    28     <script src="/Scripts/bootstrap-table-zh-CN.js"></script>
    29     <script src="~/Scripts/js/Activity/Comment.js"></script>
    30     <script>
    31         $(function () {
    32 
    33         //1.初始化Table
    34         var oTable = new TableInit();
    35         oTable.Init();
    36 
    37         //2.初始化Button的点击事件
    38         var oButtonInit = new ButtonInit();
    39         oButtonInit.Init();
    40 
    41     });
    42     </script>
    43 </body>
    44 </html>
    View Code

     二、处理脚本

      1 var TableInit = function () {
      2     var oTableInit = new Object();
      3 
      4     //初始化Table
      5     oTableInit.Init = function () {
      6         $('#test_Table').bootstrapTable({
      7             url: "test",
      8             method: 'get',
      9             datatype: 'json',
     10             contentType: "application/x-www-form-urlencoded",
     11             toolbar: '#test_toolbar',
     12             striped: false, //是否显示行间隔色
     13             cache: false,
     14             pagination: true,
     15             sortable: false,
     16             sortName: 'AddDate',
     17             sortOrder: "asc",
     18             queryParams: oTableInit.queryParams,
     19             sidePagination: "server",
     20             pageNumber: 1,
     21             pageSize: 20,
     22             pageList: [20, 30, 50, 100],
     23             paginationPreText: '上一页',
     24             paginationNextText: '下一页',
     25             search: false,
     26             strictSearch: false,
     27             showColumns: false,
     28             showRefresh: true,
     29             minimumCountColumns: 2,
     30             clickToSelect: true,//单击行选中
     31             height: 600,
     32             idField: "Id",
     33             uniqueId: "Id", //唯一标识列
     34             showToggle: false,
     35             cardView: false,
     36             detailView: false,
     37             showHeader: true,
     38             singleSelect: false,//是否单选
     39             checkboxHeader: true,
     40             columns: [
     41                 { checkbox: true },
     42             {
     43                 title: '序号', field: 'No',  '50', align: 'center', formatter: function (value, row, index) {
     44                     return index + 1;
     45                 }
     46             },
     47             { field: 'Id', title: 'Id', visible: false },
     48             {
     49                 field: 'Operate',
     50                 title: '操作',
     51                  '100',
     52                 halign: 'center',
     53                 align: 'center',
     54                 formatter: function (value, row, index) {
     55                     var strHtml = "<a title='编辑' onclick='btnEdit("" + row.Id + "")'  href='javascript:void(0);'><i class='fa fa-pencil fa-fw'></i></a> &nbsp;";
     56                     strHtml += "<a title='删除' onclick='btnDelete("" + row.Id + "")' href='javascript:void(0);'><i class='fa fa-trash-o'></i></a>";
     57                     return strHtml;
     58                 }
     59             },//或者
     60                 {
     61                     field: 'Operate', title: '操作',  '80', halign: 'center', align: 'left',
     62                     events: operateEvents,
     63                     formatter: function (value, row, index) {
     64                         var strHtml = "<a class='upload' title='上传'  href='javascript:void(0);'><i class='fa fa-upload fa-fw'></i></a>&nbsp;";
     65                         strHtml += "<a class='remove' title='删除'  href='javascript:void(0);'><i class='fa fa-trash-o fa-fw'></i></a>";
     66                         return strHtml;
     67                     }
     68                 }
     69             ]
     70         });
     71     };
     72 
     73     //传递后台的参数
     74     oTableInit.queryParams = function (params) {
     75         //参数对应表格参数
     76         /* 方式一 var temp1 = {
     77              rows: this.pageSize,
     78              page: this.pageNumber,
     79              sort: this.sortName,
     80              order: this.sortOrder
     81          };*/
     82 
     83         //序列化表单数据
     84         var searchWhere = $("#activity_SearchForm").serializeFormToJson();
     85         //方式二
     86         var temp = {
     87             limit: params.limit,   //页面大小
     88             offset: params.offset / params.limit,  //页码
     89             searchWhere: JSON.stringify(searchWhere)//JSON字符串参数
     90         };
     91         return temp;
     92     };
     93     oTableInit.responseHandler = function (res) {
     94         if (res) {
     95             return {
     96                 "rows": res.result,
     97                 "total": res.totalCount
     98             };
     99         } else {
    100             return {
    101                 "rows": [],
    102                 "total": 0
    103             };
    104         }
    105     };
    106     return oTableInit;
    107 };
    108 
    109 var ButtonInit = function () {
    110     var oInit = new Object();
    111 
    112     oInit.Init = function () {
    113 
    114         //清空查询条件
    115         $("#btnClear").click(function () {
    116            //...
    117         });
    118 
    119         //查询
    120         $("#btnSearch").click(function () {
    121             $("#test_Table").bootstrapTable('refresh');
    122         });
    123 
    124         //批量显示
    125         $("#btnEdit").click(function () {
    126             var selectRow = $("#test_Table").bootstrapTable('getSelections');
    127             if (selectRow.length <= 0) {
    128                 $.modalAlert("请先选中要操作的数据行。", "warning");
    129             }
    130 
    131             var ids = new Array();
    132             $.each(selectRow, function (i, row) {
    133                 ids[i] = row["Id"];
    134             });
    135 
    136             $.confirmForm({
    137               //...
    138             });
    139         });
    140 
    141         //批量删除
    142         $("#btnDelete").click(function () {
    143             var selectRow = $("#test_Table").bootstrapTable('getSelections');
    144             if (selectRow.length <= 0) {
    145                 $.modalAlert("请先选中要操作的数据行。", "warning");
    146             }
    147 
    148             var ids = new Array();
    149             $.each(selectRow, function (i, row) {
    150                 ids[i] = row["Id"];
    151             });
    152 
    153             $.deleteForm({
    154             //...
    155             });
    156         });
    157     };
    158     return oInit;
    159 };
    160 
    161 //编辑
    162 var btnEdit = function (key) {
    163   //...
    164 }
    165 
    166 //删除
    167 var btnDelete = function (key) {
    168    //...
    169 }
    170 
    171 //行事件或采用以下方式
    172 
    173 //操作监听事件
    174 window.operateEvents = {
    175     //删除数据行
    176     'click .remove': function (e, value, row, index) {
    177         $('#test_Table').bootstrapTable('remove', { field: 'Id', values: [row['Id']] });
    178     },
    179     //上传
    180     'click .upload': function (e, value, row, index) {
    181        //...
    182     }
    183 };
    View Code

    三、后端处理

     1         /// <summary>
     2         /// test
     3         /// </summary>
     4         /// <param name="limit">页数据大小</param>
     5         /// <param name="offset">页码</param>
     6         /// <param name="searchWhere"></param>
     7         /// <returns></returns>
     8         [HttpGet]
     9         [AjaxOnly]
    10         public JsonResult GetCommentGridJson(int limit, int offset, string searchWhere)
    11         {
    12             //总数
    13             int rowCount = 0;
    14             IList<T> list = null;
    15             return Json(new { total = rowCount, rows = list });
    16         }
    17         
    18         //返回JSON必须包含total,rows
    View Code
  • 相关阅读:
    LC 1383. Maximum Performance of a Team
    P3805 【模板】manacher算法
    P1226 【模板】快速幂||取余运算
    1119 Pre- and Post-order Traversals
    1117 Eddington Number (二分)
    1111 Online Map (Dij/spfa)
    1108 Finding Average
    IPC
    Json to JObject转换的使用方法
    JsonConvert序列化
  • 原文地址:https://www.cnblogs.com/lenovo_tiger_love/p/7474403.html
Copyright © 2020-2023  润新知