• 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
  • 相关阅读:
    FZU 2112 并查集、欧拉通路
    HDU 5686 斐波那契数列、Java求大数
    Codeforces 675C Money Transfers 思维题
    HDU 5687 字典树插入查找删除
    HDU 1532 最大流模板题
    HDU 5384 字典树、AC自动机
    山科第三届校赛总结
    HDU 2222 AC自动机模板题
    HDU 3911 线段树区间合并、异或取反操作
    CodeForces 615B Longtail Hedgehog
  • 原文地址:https://www.cnblogs.com/lenovo_tiger_love/p/7474403.html
Copyright © 2020-2023  润新知