JQuery.dataTables 테이블 플러그인은 지정된 페이지 예제 공유로 이동합니다.

이 기사에서는 지정된 페이지로 이동하는 솔루션을 추가하는 JQuery.dataTables 테이블 플러그인을 주로 소개합니다. 매우 훌륭하고 참조할 만한 가치가 있으므로 모두에게 도움이 되기를 바랍니다.

1. 솔루션

1. 사용자 정의 도구 모음을 추가하고 텍스트 상자를 삽입합니다

 "dom": 'l<"toolbar">frtip', //自定义工具栏 
//设置工具栏内容 
//l - length changing input control 
//f - filtering input 
//t - The table! 
//i - Table information summary 
//p - pagination control 
//r - processing display element 
[javascript] view plain copy print?
$("p.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>');

2. 텍스트 상자의 변경 이벤트를 듣고 플러그인의 전송 페이지 메서드를 실행합니다. in이 성공적으로 그려지면 텍스트를 바인딩합니다. 상자의 값

//调转到指定页面索引 ，注意大小写 
var oTable = $('#example1').dataTable(); 
oTable.fnPageChange(page);

2. 전체 샘플 코드

//绘制的时候触发，绑定文本框的值 
table.on('draw.dt', function (e, settings, data) { 
  var info = table.page.info(); 
  //此处的page为0开始计算 
  console.info('Showing page: ' + info.page + ' of ' + info.pages); 
 
  $('#searchNumber').val(info.page + 1); 
});

는 다음과 같이 표시됩니다.

관련 권장 사항:

jQuery 플러그인 DataTables 페이징 개발 기술 공유

jQuery Datatables 테이블 헤더 정렬 문제 해결 방법

jquery 플러그인 데이터 테이블 속성 소개 및 페이징 및 정렬 예제 생성에 대한 자세한 설명

위 내용은 JQuery.dataTables 테이블 플러그인은 지정된 페이지 예제 공유로 이동합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!