datatable指定页码分页_datatable设置页码-CSDN博客

本文链接：https://blog.csdn.net/web_qdkf/article/details/77113226

该博客主要介绍了如何在使用DataTable时配置分页，并实现点击按钮跳转到指定页码的功能。通过`getDataTableConfig`函数设置分页参数，`turnPagination`函数用于添加跳转输入框和绑定事件，当用户输入页码并确认时，调用`fnPageChange`方法切换到对应页码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  /*
   * 获取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);
    });
  };