DataTableプラグインを使って非同期データのロードを実現します。

<table class="table table-bordered table-striped" id="table-main">
  <thead>
  <tr>
    <th>   </th>
    <th>   </th>
    <th>   </th>
    <th>  </th>
    <th>  </th>
    <th>    </th>
  </tr>
  </thead>
</table>

$('#select-game').select2(); //         
 
       //       
  var table_lang = {
    "sProcessing": "   ...",
    "sLengthMenu": "   _MENU_  ",
    "sZeroRecords": "      ",
    "sInfo": "      _START_   _END_  ，  _TOTAL_  。",
    "sInfoEmpty": "      0   0  ，  0  ",
    "sInfoFiltered": "(  _MAX_      )",
    "sInfoPostFix": "",
    "sSearch": "  :",
    "sUrl": "",
    "sEmptyTable": "      ",
    "sLoadingRecords": "   ...",
    "sInfoThousands": ",",
    "oPaginate": {
      "sFirst": "  ",
      "sPrevious": "  ",
      "sNext": "  ",
      "sLast": "  ",
      "sJump": "  "
    },
    "oAria": {
      "sSortAscending": ":        ",
      "sSortDescending": ":        "
    }
  };
 
  //     
  var table_main = $("#table-main").dataTable({
    language:table_lang,  //     
    autoWidth: false,   //         
    lengthMenu: [25, 50, 100],
    stripeClasses: ["odd", "even"], //         ，     CSS     
    processing: false,   //       ,    
    serverSide: true,   //         
    searching: true,    //       
    orderMulti: true,   //       
    order: [],       //         ,             
    renderer: "bootstrap", //     ：Bootstrap jquery-ui
    pagingType: "simple_numbers", //    ：simple,simple_numbers,full,full_numbers
    columnDefs: [{
      "targets": 'nosort', //      
      "orderable": false  //       ‘nosort'     
    }],
    ajax: function (data, callback, settings) {
      //      
      var param = {};
      param.limit = data.length; //         ，               
      param.start = data.start; //        
      param.page = (data.start / data.length)+1; //     
      //ajax    
      $.ajax({
        type: "GET",
        url: "getRecodeList",
        cache: true, //     
        data: param, //        
        dataType: "json",
        success: function (result) {
//              console.log(result);
          //setTimeout        
          setTimeout(function () {
            //      
            var returnData = {};
            returnData.draw = data.draw;       //          draw   ,       
            returnData.recordsTotal = result.total;  //         
            returnData.recordsFiltered = result.total;//          ，           
            returnData.data = result.data;      //        
            //console.log(returnData);
            //   DataTables   callback  ，            DataTables    
            //             ，                  
            callback(returnData);
            cut_td($("#table-main"), 40); //     
 
          }, 200);
        }
      });
    },
    //      
    columns: [
      { "data": "user_name" },
      { "data": "channel" },
      { "data": "game" },
      { "data": "status",
        "render": function(data){
          var status_name = '';
          switch(data)
          {
            case 0: status_name = '   '; break;
            case 1: status_name = '    '; break;
            case 2: status_name = '  '; break;
            case 3: status_name = '    '; break;
            default : status_name = '  '; break;
          }
          return status_name;
        }},
      { "data": "cast_time",
        "render" : function(data){
          if (data)
          {
            return data + 's';
          }
          else
          {
            return '  ';
          }
        }},
      { "data": "format_created_at" },
    ]
  }).api();

{
 "total": 234,
 "per_page": "25",
 "current_page": 1,
 "last_page": 10,
 "next_page_url": "http://local.dgc_sdkops.com/monitor/log_pack/getRecodeList?page=2",
 "prev_page_url": null,
 "from": 1,
 "to": 25,
 "data": [
  {
   "id": 128,
   "user_id": 1,
   "task_id": "package_128_113",
   "channel_version_id": 128,
   "game_version_id": 113,
   "extend_id": 0,
   "type": "pack",
   "status": 2,
   "remark": "",
   "cast_time": 93475,
   "created_at": "1500365068",
   "updated_at": "1500458543",
   "user_name": "admin",
   "format_created_at": "2017-07-18 16:04:28",
   "format_updated_at": "2017-07-18 16:04:28",
   "game": "x",
   "channel": "y",
   "game_id": 11290,
   "channel_id": 67
  },
  {
   "id": 240,
   "user_id": 1,
   "task_id": "package_128_113",
   "channel_version_id": 128,
   "game_version_id": 113,
   "extend_id": 0,
   "type": "pack",
   "status": 0,
   "remark": "",
   "cast_time": 0,
   "created_at": "1500458454",
   "updated_at": "1500458454",
   "user_name": "admin",
   "format_created_at": "2017-07-19 18:00:54",
   "format_updated_at": "2017-07-19 18:00:54",
   "game": "x",
   "channel": "y",
   "game_id": 11290,
   "channel_id": 67
  }
 ]
}