dataTables 增加输入指定页数进行跳转

修改dataTables.bootstrap.js源文件，找到

if ( btnDisplay ) {
	node = $('<li>', {
			'class': classes.sPageButton+' '+btnClass,
			'id': idx === 0 && typeof button === 'string' ?
				settings.sTableId +'_'+ button :
				null
		} )
		.append( $('<a>', {
				'href': '#',
				'aria-controls': settings.sTableId,
				'aria-label': aria[ button ],
				'data-dt-idx': counter,
				'tabindex': settings.iTabIndex
			} )
			.html( btnDisplay )
		)
		.appendTo( container );

	settings.oApi._fnBindAction(
		node, {action: button}, clickHandler
	);

	counter++;
}
复制代码

在for循环外面添加：

if($("#redirect")!=null){
	$("#redirect").remove();
	$("<input type=\"text\" style=\"width: 50px;height: 30px;border-radius: 4px 4px 4px 4px;\" id=\"redirect\" class=\"redirect\">").appendTo( container );
	$('#redirect').css({"outline":"none","margin-left":"5px","margin-right":"5px","position":"absolute","right":"80px"});
}
复制代码

这样就添加了输入框在页码按钮后面了，

接下来就是绑定事件，在定义dataTable的时候添加如下属性（在 jquery.dataTables.js 源码中找到"fnDrawCallback": null ，替换为以下代码）：

"fnDrawCallback": function(){
     var oTable = $(myTable).dataTable();
     $('#redirect').keyup(function(e){
         if(e.keyCode==13){
         
if($(this).val() && $(this).val()>0){
             var redirectpage = $(this).val()-1;
         }else{
             var redirectpage = 0;
         }
         oTable.fnPageChange( redirectpage );
         }
     });
 },
复制代码

即当输入回车时执行跳转

原文转自 https://blog.csdn.net/cw370008359/article/details/51516427

---

以上为页面中存在一个table表格的情况

如果你的页面中也存在多个table表格的情况，接着尬聊，请看下面...

如图所示

页面中tab下的表格都是独立的，相当于初始化了5个datatable（第一个tab无表格），so... 上面的方法解决不了此问题。突破口在定义dataTable的时添加的fnDrawCallback属性，在上面的方法中可以看到 var oTable = $(myTable).dataTable();只要把 $(myTable)改成每次点击的时候相对应的table表格id即可；

// tab 切换
$(".page-tabs-custom li").click(function(){
	// 当前点击的tab标识
	var tableIndex = $(this).attr("id");
	console.log(tableIndex);
	// 给相对应的表格id添加属性
	switch (tableIndex)
	{
	case '0':
	  break;
	case '1':
		tableId = $("#groupMessageHistory").dataTable();  
		console.log('1');
	  break;
	case '2':
		tableId = $("#messagePushHistory").dataTable();   
		console.log('2');
	  break;
	case '3':
		tableId = $("#messageRechargehistory ").dataTable();  
		console.log('3');
	  break;
	case '4':
	  break;
	case '5':
		tableId = $("#messageTemplate ").dataTable();    
		console.log('5');
	  break;
	default:
		break;
}
	    
复制代码

给每个初始化datatable都添加fnDrawCallback属性，这里为其中之一

	// 初始化群发记录dataTable
	var $groupMessageHistory = $('#groupMessageHistory');
	var _groupMessageHistory = $groupMessageHistory.dataTable($.extend(true, {}, CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
		//ajax配置为function,手动调用异步查询
	    ajax : function(data, callback, settings) {
		    // 分页参数
	    	var param = getPagingParameters(data); 
            $.ajax({
				type : "GET",
				url : "你的地址",
				cache : false, //禁用缓存
				data : param, //传入已封装的参数
				dataType : "json",
				success : function(result) {
					//异常判断与处理
					if (result.errorCode) {
						//$.dialog.alert("查询失败。错误码：" + result.errorCode);
						toastr.error("查询失败。错误码："+ result.errorCode);
						return;
					}

					//封装返回数据，这里仅演示了修改属性名
					var returnData = {};
					returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
					recordsTotal = returnData.recordsTotal = result.data.totalCount;
					returnData.recordsFiltered = result.data.totalCount;//后台不实现过滤功能，每次查询均视作全部结果
					returnData.data = result.data.result;
					//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
					//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
					callback(returnData);
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					//$.dialog.alert("查询失败");
					toastr.error("查询失败");
				}
			});
        },
        "fnDrawCallback": function () {  
            appendSkipPage();  
        },       
		"columns" : [
        	{"data":"messageTitle"},
        	{"data":"messageContent"},
        	{"data":"createTime"},
        	{
				"data" : "status",
				"render" : function(data, type, row, full) {
					return row.sendNumber + "/" + row.successNumber;
				}
			},
			{
				"data" : "errmsg",
				"render" : function(data, type, row, full) {
					if(row.errmsg != null && row.errmsg != ""){
						return row.errmsg;
					}else{
						return "-";
					}
				}
			},
			{"data":null}
        ],
        "columnDefs" : [ {
			"targets" : 5,
			"data" : "id",
			"orderable" : false,
			"render" : function(data, type,full) {
				var html = "<a class='openMessagePushResult' value='"+full.id+"'>查看</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class='export' value='"+full.id+"'>导出</a>";
				return html;
			}
		} ],
		//"order": [[ 0, "desc" ]],
		"ordering" : false,
		"dom": 'tl<"float_left"i>p',//设置插件的位置
	})).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
	// 为pagechange增加监听器，传递page参数到服务器进行分页处理
	$groupMessageHistory.on('page.dt', function() {
		page = _groupMessageHistory.page.info().page;
	});
	// 当length.dt改变时解决分页错误的情况
	$groupMessageHistory.on('length.dt', function() {
		page = 0;
	});
复制代码

实现分页

// 分页
function appendSkipPage() {  
	$('.paginate_jump').remove();
    var node=  
        $("<li class='paginate_jump active'>" +  
            "   <div class='input-group' style='margin-left:3px;'>" +  
            "       <span class='input-group-addon'>跳转到</span>" +  
            "       <input type='text' class='form-control' />" +   
            "   </div>" +  
            "</li>");  
  
    node.find(".form-control").keyup(function(e){
        if(e.keyCode==13){
     	   if($(this).val() && $(this).val()>0){
                var redirectpage = $(this).val()-1;
            }else{
                var redirectpage = 0;
            }
     	  tableId.fnPageChange( redirectpage );
        }
    });  
    $("ul.pagination").append(template);  
}; 
复制代码

完工。