BootStrap Data Table Instance Code

$(function(){
  $('#archives-table').bootstrapTable({
   url: "/coinSend/list",//Data source   dataField: "rows",//The server returns the data key value. That is to say, the key value placed by the record is rows, and the key value used for the total number of records is total when paging.   search: true,//Search   cache: false,
   striped: true,
   pagination: true,//Does it be paging   sortable: true,          // Whether to enable sorting   sortOrder: "asc",          //sort by   //pageNumber:1,
   pageSize: 10,// Number of records per page   pageList: [5, 10, 20, 50],//Page step value   sidePagination: "server",//Server paging   contentType: "application/json",//The format of the requested data content is application/json. It handles it on its own server according to the format.   dataType: "json",// Looking forward to returning data type   method: "post",//Request method   searchAlign: "left",//Query box alignment   silent: true,
   queryParamsType: "limit",//Query parameter organization method   queryParams: function getParams(params) {
     var param = {
      pageNum: ,
      pageSize: ,
      realName : 
     };
     return param;
   },
   responseHandler: function(res) {
     return {
      "total": ,//Total page count      "rows":   //data     };
   },
   searchOnEnterKey: false,//Enter search   showRefresh: true,//Refresh button   showColumns: true,//Column Select Button   buttonsAlign: "left",//Button alignment   toolbar: "#userToolbarsendCoin",//Specify toolbar toolbarAlign: "right",//Toolbar alignment   columns: [
     /*{
       title: "Select all",
       field: "select",
       checkbox: true,
       width: 20,//width
       align: "center",//level
       valign: "middle"//vertical
      },*/
     {
      title: "ID",//title      field: "id",//Key name      sortable: true,//Is it sortable      order: "desc"//Default sorting     },
     {
      field: "",
      title: "username",
      sortable: true,
      titleTooltip: "this is name"
     }/*,
     {
      field: "",
      title: "",
     }*/,
     {
      field: "",
      title: "Real name",
      sortable: true,
     },
     {
      field: "",
      title: "Department",
      sortable: true,
     },{
      field: "coinName",
      title: "type",
      sortable: true,
     },
     {
      field: "amount",
      title: "quantity",
      sortable: true,
      sorter:numSort
     },
     {
      field: "validDateStart",
      title: "Fast period",
      sortable: true,
      //——Modify——Get the value of the date column for conversion      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = ();//Year        var m = () + 1;//moon        var d = ();//day        return y+"-"+m+"-"+d
      }
     },
     {
      field: "validDateEnd",
      title: "Expiration date",
      sortable: true,
      //——Modify——Get the value of the date column for conversion      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = ();//Year        var m = () + 1;//moon        var d = ();//day        return y+"-"+m+"-"+d}
     }
     ,
     {
      field: "",
      title: "Operation column",
      formatter:function(value, row, rowIndex){
        var userId =;
        var amount =;
        var validDateStart =;
        var validDateEnd =;
        var realName =;
        (userId);
        (realName);
        (amount);(validDateStart);(validDateEnd);
        if(userId!=null){
         return'      '+'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\',\''+realName+'\',\''++'\');"> <i class="icon-edit icon-white"></i>distribute</a>' +'      '/*+
             '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(\'+userId+'\',\''+amount+'\',\''+realName+'\',\''+validDateEnd+'\',\''++'\');"> <i class="icon-edit icon-white"></i>Edit</a>'*/;
        }else{
         return '&lt;a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\');"&gt; &lt;i class="icon-edit icon-white"&gt;&lt;/i&gt;distribute&lt;/a&gt;';
        }
     }
     }
   ],
   onClickRow: function(row, $element) {
     //$element is the jquery object of the current tr     $("background-color", "white");
     /*alert();
     id = ;*/
   },//Click the row event   locale: "zh-CN",//Chinese support,   detailView: false, //Does the details be displayed?   detailFormatter: function(index, row, element) {
   var html = '';
   $.each(row, function(key, val){
     html += "&lt;p&gt;" + key + ":" + val + "&lt;/p&gt;"
   });
   return html;
  }
})
  /*$('#archives-table').bootstrapTable('hideColumn', '');*/
  /*$("#searchBtn").click(function() {
    var realName = $("#realName").val();
    $.ajax({
      type: "post",
      url: "/coinSend/list",
      data: {param : param},
      dataType:"json",
      success : function(json) {
       $("#archives-table").bootstrapTable('load', json);//The main purpose is to write this way
      }
    });
   });*/
})

<div class="ibox float-e-margins">
  <div class="ibox-title">
   <h5>Employee List</h5>
   <div class="ibox-tools">
     <a class="collapse-link">
      <i class="fa fa-chevron-up"></i>
     </a>
   </div>
  </div>
  <div class="ibox-content">
   <div class="ibox float-e-margins">
     <table  class="table table-hover">
     </table>
   </div>
  </div>
</div>