深入解析BootstrapTable的使用技巧

  

    

      
         新增
      
      
         编辑
      
      
         删除
      
    

    
  

$(document).ready(function() {
  $('#dataTable').bootstrapTable({
    url: '/Data/GetRecords',
    method: 'GET',
    toolbar: '#toolbar',
    striped: true,
    cache: false,
    pagination: true,
    sidePagination: 'server',
    pageNumber: 1,
    pageSize: 10,
    pageList: [10, 25, 50, 100],
    search: true,
    showColumns: true,
    showRefresh: true,
    minimumCountColumns: 2,
    clickToSelect: true,
    columns: [
      { field: 'id', title: 'ID', align: 'center', valign: 'middle' },
      { field: 'name', title: '名称', align: 'center', valign: 'middle' },
      { field: 'status', title: '状态', align: 'center', valign: 'middle' },
      { field: 'date', title: '日期', align: 'center', valign: 'middle' }
    ]
  });
});

public ActionResult GetRecords(int limit, int offset)
{
  using (var db = new YourDbContext())
  {
    var query = db.YourTable.AsQueryable();
    var total = query.Count();
    var data = query.Skip(offset).Take(limit).ToList();
    return Json(new { total = total, rows = data }, JsonRequestBehavior.AllowGet);
  }
}

var queryParams = function (params) {
  return {
    limit: params.limit,
    offset: params.offset,
    search: $('#searchInput').val()
  };
};

$('#dataTable').bootstrapTable({
  queryParams: queryParams
});

$('#refreshButton').click(function () {
  $('#dataTable').bootstrapTable('refresh');
});