<!--css樣式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

<table data-toggle="table">
 <thead>
 ...
 </thead>
</table>
 ...

$('#table').bootstrapTable({
 url: 'data.json'
 });

$(function () {
 
 //1.初始化Table
 var oTable = new TableInit();
 oTable.Init();
 
 //2.初始化Button的點(diǎn)擊事件
 /* var oButtonInit = new ButtonInit();
 oButtonInit.Init(); */
 
 });
 
 
 var TableInit = function () {
 var oTableInit = new Object();
 //初始化Table
 oTableInit.Init = function () {
 $('#tradeList').bootstrapTable({
 url: '/VenderManager/TradeList', //請求后臺的URL（*）
 method: 'post',  //請求方式（*）
 toolbar: '#toolbar', //工具按鈕用哪個容器
 striped: true,  //是否顯示行間隔色
 cache: false,  //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個屬性（*）
 pagination: true,  //是否顯示分頁（*）
 sortable: false,  //是否啟用排序
 sortOrder: "asc",  //排序方式
 queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
 sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
 pageNumber:1,  //初始化加載第一頁，默認(rèn)第一頁
 pageSize: 50,  //每頁的記錄行數(shù)（*）
 pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
 strictSearch: true,
 clickToSelect: true, //是否啟用點(diǎn)擊選中行
 height: 460,  //行高，如果沒有設(shè)置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度
 uniqueId: "id",  //每一行的唯一標(biāo)識，一般為主鍵列
 cardView: false,  //是否顯示詳細(xì)視圖
 detailView: false,  //是否顯示父子表
 columns: [{
  field: 'id',
  title: '序號'
 }, {
  field: 'liushuiid',
  title: '交易編號'
 }, {
  field: 'orderid',
  title: '訂單號'
 }, {
  field: 'receivetime',
  title: '交易時間'
 }, {
  field: 'price',
  title: '金額'
 }, {
  field: 'coin_credit',
  title: '投入硬幣'
 }, {
  field: 'bill_credit',
  title: '投入紙幣'
 }, {
  field: 'changes',
  title: '找零'
 }, {
  field: 'tradetype',
  title: '交易類型'
 },{
  field: 'goodmachineid',
  title: '貨機(jī)號'
 },{
  field: 'inneridname',
  title: '貨道號'
 },{
  field: 'goodsName',
  title: '商品名稱'
 }, {
  field: 'changestatus',
  title: '支付'
 },{
  field: 'sendstatus',
  title: '出貨'
 },]
 });
 };
 
 //得到查詢的參數(shù)
 oTableInit.queryParams = function (params) {
 var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
 limit: params.limit, //頁面大小
 offset: params.offset, //頁碼
 sdate: $("#stratTime").val(),
 edate: $("#endTime").val(),
 sellerid: $("#sellerid").val(),
 orderid: $("#orderid").val(),
 CardNumber: $("#CardNumber").val(),
 maxrows: params.limit,
 pageindex:params.pageNumber,
 portid: $("#portid").val(),
 CardNumber: $("#CardNumber").val(),
 tradetype:$('input:radio[name="tradetype"]:checked').val(),
 success:$('input:radio[name="success"]:checked').val(),
 };
 return temp;
 };
 return oTableInit;
 };
 

BufferedReader bufr = new BufferedReader(
 new InputStreamReader(request.getInputStream(),"UTF-8"));
 StringBuilder sBuilder = new StringBuilder("");
 String temp = "";
 while((temp = bufr.readLine()) != null){
 sBuilder.append(temp);
 }
 bufr.close();
 String json = sBuilder.toString();
 JSONObject json1 = JSONObject.fromObject(json);
 String sdate= json1.getString("sdate");//通過此方法獲取前端數(shù)據(jù)
 ...

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype)
{
 ...
}