Cacher is the code snippet organizer for pro developers

        [DontWrapResult]
        public async Task<ActionResult> ListSearch(int limit, int offset, string sortfiled, string sortway)
        {
            var sort = sortfiled?.Length > 0 ? $"{sortfiled} {sortway}" : "";
            var filter = new GetPagedXXXAsyncInput
            {
                SkipCount = offset,
                MaxResultCount = limit,
                Sorting = sort,
                AccountId = Request["aid"],
                MaterialId = Request["mid"],
                TradeCode = Request["tradeCode"],
            };

            var pagedData = await _xxxService.GetPagedXXXAsync(filter);
            return Json(new
            {
                total = pagedData.TotalCount,
                rows = pagedData.Items
            }, JsonRequestBehavior.AllowGet);
        }

$(function() {
  //1.初始化Table
  var oTable = new TableInit()
  oTable.Init()

  //2.初始化Button的点击事件
  var oButtonInit = new ButtonInit()
  oButtonInit.Init()
})

var $table = $('#tb-list')
var TableInit = function() {
  var oTableInit = new Object()
  //初始化Table
  oTableInit.Init = function() {
    $table.bootstrapTable({
      url: $table.data('source-url'), //请求后台的URL（*）
      method: 'get', //请求方式（*）
      toolbar: '#toolbar', //工具按钮用哪个容器
      striped: true, //是否显示行间隔色
      cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
      pagination: true, //是否显示分页（*）
      sortable: true, //是否启用排序
      sortOrder: 'asc', //排序方式
      queryParams: oTableInit.queryParams, //传递参数（*）
      sidePagination: 'server', //分页方式：client客户端分页，server服务端分页（*）
      pageNumber: 1, //初始化加载第一页，默认第一页
      pageSize: 20, //每页的记录行数（*）
      pageList: [10, 20, 30, 50], //可供选择的每页的行数（*）
      search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
      strictSearch: true,
      showColumns: false, //是否显示所有的列
      showRefresh: false, //是否显示刷新按钮
      minimumCountColumns: 2, //最少允许的列数
      clickToSelect: true, //是否启用点击选中行
      //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
      uniqueId: 'Id', //每一行的唯一标识，一般为主键列
      showToggle: false, //是否显示详细视图和列表视图的切换按钮
      cardView: false, //是否显示详细视图
      detailView: false, //是否显示父子表
      columns: [
        {
          title: '#',
          formatter: showRowNo
        },
        {
          field: 'TradeCode',
          title: '交易号',
          sortable: true
        },
        {
          field: 'ProcessingFactory',
          title: '加工厂'
        },
        {
          field: 'AnswerLevelName',
          title: '原/现级别',
          formatter: function(value, row, index) {
            return (row.AskLevel || '-') + ' / ' + row.AnswerLevelName
          }
        },
        {
          field: 'MaterialCode',
          title: '物料代码'
        },
        {
          field: 'MaterialName',
          title: '物料名称'
        },
        {
          field: 'MaterialName',
          title: '规格'
        },
        {
          field: 'ProductionDate',
          title: '生产日期',
          sortable: true
        },
        {
          field: 'QtyBox',
          title: '实收',
          align: 'right',
          halign: 'right'
        },
        {
          field: 'QtyBoxStrapped',
          title: '已装',
          align: 'right',
          halign: 'right'
        },
        {
          field: 'AccountName',
          title: '采购基地'
        },
        {
          field: 'Remark',
          title: '采购备注'
        },
        {
          field: 'CreationTime',
          title: '操作时间',
          //sortable: true,
          formatter: function(value, row, index) {
            value = row.LastModificationTime || row.CreationTime
            var date = eval(
              value.replace(/\/Date\((\d+)\)\//gi, 'new Date($1)')
            )
            var formatDate = date.toString('yyyy/MM/dd HH:mm:ss')
            var yf = new Date().getFullYear() + '/'
            return formatDate.replace(yf, '')
          }
        },
        {
          field: '',
          title: ''
        }
      ]
    })
  }

  //指定table表体操作事件
  window.operateEvents = {
    'click .like': function(e, value, row, index) {
      alert('You click like icon, row: ' + JSON.stringify(row))
      console.log(value, row, index)
    },
    'click .edit': function(e, value, row, index) {
      //alert('You click edit icon, row: ' + JSON.stringify(row));
      //console.log(value, row, index);

      editTask(row.Id)
    },
    'click .remove': function(e, value, row, index) {
      //alert('You click remove icon, row: ' + JSON.stringify(row));
      //console.log(value, row, index);

      deleteTask(row.Id)
    }
  }

  //指定bootstrap-table查询参数
  oTableInit.queryParams = function(params) {
    var temp = {
      //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
      limit: params.limit, //页面大小
      offset: params.offset, //页码
      sortfiled: params.sort, //排序字段
      sortway: params.order, //升序降序
      aid: $('select[name="aid"]').data('aid'),
      mid: $('input[name="mid"]').data('mid'),
      tradeCode: $('input[name="tradeCode"]').data('tradeCode')
    }
    return temp
  }

  function showRowNo(value, row, index) {
    var tableOptions = $table.bootstrapTable('getOptions')
    return (tableOptions.pageNumber - 1) * tableOptions.pageSize + (1 + index)
  }

  //格式化显示json日期格式
  function showDate(value, row, index) {
    //var date = new Date(value);
    //var formatDate = date.toLocaleString();//.toDateString();
    var date = eval(value.replace(/\/Date\((\d+)\)\//gi, 'new Date($1)'))
    var formatDate = date.toString('yyyy/MM/dd HH:mm:ss')
    var yf = new Date().getFullYear() + '/'
    formatDate = formatDate.replace(yf, '')

    return formatDate
  }

  function showNumber(value, row, index) {
    return value
  }

  return oTableInit
}

//bootstrap-table工具栏按钮事件初始化
var ButtonInit = function() {
  var oInit = new Object()
  var postdata = {}

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

    $('#btn-query').on('click', function() {
      $('#search-form select,#search-form input').each(function(i) {
        $(this).data($(this).attr('name'), $(this).val())
      })

      $table.bootstrapTable('refresh')
    })
  }

  return oInit
}

@{
    ViewBag.Title = "完列表";
    ViewBag.ActiveMenu = "Receipt";
}
<h3>
    <a href="javascript:;" onclick="window.location.reload();">@ViewBag.Title</a>
</h3>

<div class="text-right">
    <form class="form-inline block" method="get" id="search-form" onsubmit="return false;">
        <div class="form-group form-group-sm">
            <label>
                公司
            </label>
            @Html.DropDownList("aid", (IEnumerable<SelectListItem>)ViewBag.Accounts, "---全部---", new { @class = "form-control" })
        </div>
        <div class="form-group form-group-sm">
            <label>
                交易号
            </label>
            <input type="text" class="form-control" name="tradeCode" value="@Request["tradeCode"]" placeholder="例 519" />
        </div>
        <div class="form-group form-group-sm">
            <label>
                物料ID
            </label>
            <input type="text" class="form-control" name="mid" value="@Request["mid"]" placeholder="例 301070102" />
        </div>
        @*<div class="form-group form-group-sm">
            <label>
                批号
            </label>
            <input type="text" class="form-control" name="bcode" value="@Request["bcode"]" placeholder="例 20160101" />
        </div>*@
        <button type="reset" class="btn btn-default btn-sm">重置</button>
        <button type="submit" class="btn btn-primary btn-sm" id="btn-query">过滤</button>
    </form>
</div>
<div>
    <table id="tb-list" data-source-url="@Url.Action("ListSearch",new { area = "Admin" })"></table>
</div>
@section styles{
    <link href="~/js/lib/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" />
    <style>
        #search-form input {
            width: 8em;
        }
    </style>
}
@section scripts{
    <script src="~/js/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="~/js/lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="~/Scripts/datejs.js"></script>

    @Html.IncludeScript("~/Areas/Frost/Views/Receipt/List.js")
}