1. 程式人生 > >datatable指定頁碼分頁

datatable指定頁碼分頁

  /*
   * 獲取DataTable的公共配置
   * basePath 介面路徑
   * tableId  當前table的id
   * len 列長
   * idName id名
   * */
  var getDataTableConfig = function(basePath, tableId, len, idName) {
    /*銷燬快取資料*/
    if($.fn.dataTable.isDataTable("#" + tableId)) {
      var table = $("#" + tableId).DataTable();
      table.destroy();
    }
    var obj = {
      "language": {
        "url": "../../js/Chinese.json"
      },
      "serverSide": true,
      /*是否開啟分頁*/
      "paging": true,
      "bProcessing": true,
      /*是否顯示查詢*/
      "searching": false,
      "bStateSave": false,
      /*分頁長度*/
      "iDisplayLength": 15,
      /*是否顯示排序按鈕*/
      "bSort": false,
      "bLengthChange": false,
      "initComplete": function() {
        $(document).on("click", ".J_menuItem", n);
      },
      /*回撥*/
      "drawCallback": function() {
      turnPagination(tableId, len, idName);
        //繪製的時候觸發,繫結文字框的值
        $('#' + tableId).DataTable().on('draw.dt', function(e, settings, data) {
          var info = $('#' + tableId).DataTable().page.info();
          $('#searchNumber').val(info.page + 1);
        });
      }
    }
    return obj;
  };


  /* 跳轉指定分頁
   * tableId 當前table的id
   * len 列長
   * idName id名
   * */
  var turnPagination = function(tableId, len, idName) {
    $("#" + tableId + "_info").append('跳轉第 <input id="searchNumber" style="width:30px; border-radius:4px; border:1px solid #DDD"/> 頁<button id="sureturn">確定</button>');
    $("#searchNumber").bind("keyup", function(even) {
      if(even.keyCode == "13") {
        loading(len, idName);
        var val = $(this).val(),
          newPage = (parseInt(val) || 1) - 1;
        //調轉到指定頁面索引 ,注意大小寫dataTable首字母小寫
        var oTable = $('#' + tableId).dataTable();
        oTable.fnPageChange(newPage);
      }
    });
    $("#sureturn").on("click", function() {
      loading(len, idName);
      var val = $(this).val(),
        newPage = (parseInt(val) || 1) - 1;
      //調轉到指定頁面索引 ,注意大小寫dataTable首字母小寫
      var oTable = $('#' + tableId).dataTable();
      oTable.fnPageChange(newPage);
    });
  };