真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

 
   
    
     新增
      
      
       修改
      
      
      刪除
      
    

js代碼，使用("#table").bootstraptable({options})填充table

$("#myTable").bootstrapTable({
      url: '/BootstrapTable/GetTestData',
      method: 'get',
      toolbar: '#toobar',//工具列
      striped: true,//隔行換色
      cache: false,//禁用緩存
      pagination: true,//啟動(dòng)分頁(yè)
      sidePagination: 'client',//分頁(yè)方式
      pageNumber: 1,//初始化table時(shí)顯示的頁(yè)碼
      pageSize: 10,//每頁(yè)條目
      showFooter: false,//是否顯示列腳
      showPaginationSwitch: true,//是否顯示 數(shù)據(jù)條數(shù)選擇框
      sortable: false,//排序
      search: true,//啟用搜索
      showColumns: true,//是否顯示 內(nèi)容列下拉框
      showRefresh: true,//顯示刷新按鈕
      idField: 'SystemCode',//key值欄位
      clickToSelect: true,//點(diǎn)擊選中checkbox
      singleSelect: true,//啟用單行選中
      columns: [{
      checkbox: true
      },
     {
       field: 'SystemCode',
       title: '系統(tǒng)代碼',
       titleTooltip: 'young for you'
      },
      {
       field: 'SystemDesc',
       title: '系統(tǒng)名稱'
     },
     {
       field: 'Isvalid',
       title: '是否有效'
      },
      {
       field: 'UUser',
       title: '更新人'
      },
      {
       field: 'UDate',
       title: '更新時(shí)間'
      }],
      onClickCell: function (field, value, row, $element) {
      //alert(row.SystemDesc);
    }
   });

其中URL是table 數(shù)據(jù)源地址，如果table啟動(dòng)了分頁(yè)功能，后臺(tái)取數(shù)據(jù)的方法要加上limit、offset兩個(gè)int類型的參數(shù)，這里把后臺(tái)代碼也貼一下。

public JsonResult GetTestData(int limit, int offset)
   {
    BugzillaModelContainer db = new BugzillaModelContainer();
    List systemInfo = db.B_SystemInfo.ToList();
    for (int i = 0; i < 20; i++)
    {
     B_SystemInfo tempSystem = new B_SystemInfo();
     tempSystem.SystemCode = (i + 1).ToString();
     tempSystem.SystemDesc = "測(cè)試系統(tǒng)" + (i + 1).ToString();
     tempSystem.Isvalid = "Y";
     tempSystem.UUser = "result_for" + (i + 1).ToString();
     tempSystem.UDate = System.DateTime.Now.ToShortDateString();
     systemInfo.Add(tempSystem);
    }
 
    var total = systemInfo.Count();
    var rows = systemInfo.Skip(offset).Take(limit).ToList();
    return Json(systemInfo, JsonRequestBehavior.AllowGet);
   }

offset表示從多少條數(shù)據(jù)開(kāi)始取，limit表示取多少條數(shù)據(jù)。

客戶端搜索只要設(shè)置search=true即可。 

服務(wù)端搜索，需要設(shè)置參數(shù)。

首先設(shè)置

("#table").bootstraptable({queryParams: oTableInit.queryParams}),//傳遞參數(shù)（*）

然后獲取查詢的參數(shù)

//得到查詢的參數(shù)
 oTableInit.queryParams = function (params) {
   var temp = { 

  //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
    limit: params.limit, //頁(yè)面大小
    offset: params.offset, //頁(yè)碼
    systemcode: $("#systemcode").val(),
    };
  return temp;
};

通過(guò)button事件刷新table，重新獲取數(shù)據(jù)源，即可。

$("#btnQuery").click(function () {
   $table.bootstrapTable('refresh');
 });

最后貼上全部html代碼~

 
 
 
 
 
 
 
 


 
 
  

  
 
 
  
  
   
   新增
   
   
   修改
   
   
   刪除
   
  
  
  
 
 
 

以上就是如何在bootstrap中使用table表格，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。