Cómo usar JQuery.dataTables para implementar el complemento de tabla para agregar la función de saltar a una página específica

Puede consultar el siguiente contenido para esto:

El complemento de tabla JQuery.dataTables agrega un salto a la página especificada

Solución

1.Agregue una barra de herramientas personalizada e incruste el cuadro de texto

[javascript]?view Plain?copy "dom":?'l<"toolbar">frtip',?//Personalizar la barra de herramientas

[javascript]?view Plain?copy

//Establecer contenido de la barra de herramientas

//l?-?length?changing?input?control

//f?-?filtrado?entrada

//t?-?¡La?tabla!

//i?-?Tabla?información?resumen

//p?-?paginación?control

//r?-?procesamiento?display?elemento

[javascript]?vista simple?copia

$("div.toolbar").html('?Ir a la página >Page');

2. Escuche el evento de cambio del cuadro de texto y ejecute el método de página de transferencia del complemento

[javascript]?view Plain?copy

//¿Transferir al índice de página especificado?, preste atención a las mayúsculas

var?oTable?=?$('#example1') .dataTable();

oTable.fnPageChange(page);

3. Después de que el complemento se haya dibujado correctamente, vincule el valor del cuadro de texto

[javascript]?view Plain?copy

//Se activa al dibujar, vincula el valor del cuadro de texto

table.on('draw.dt',?function?( e,?settings,?data)?{

var?info?=?table.page.info();

//La página aquí se calcula a partir de 0

console.info('¿Mostrando?página:?' ?+?info.page?+?'?of?'?+?info.pages);

$('#searchNumber ').val(info.página?+?1);

$('#searchNumber').val(info.página?+?1);

} );

2. Código de ejemplo completo

[html]?view Plain?copy

Número

Nombre

Sexo

Cumpleaños

Clase

le>

[javascript]?view Plain?copy

$(function?()?{

//Tenga en cuenta que el método se llama DataTable

var?table?=?$('#example1').DataTable({

"dom":?'l<"toolbar">frtip',?//Barra de herramientas personalizada

"pagingType":?"full_numbers",

lengthMenu:?[3,?5,?10],

procesamiento:?true,//si Utilice la barra de progreso

serverSide:?true,//Si se debe habilitar la carga de la base de datos

ajax:?{

url:?'/tableone/getlist',

tipo:?'post',

datos:?función?(d)?{

d.name?=?'Zhang San';

p>

/*?

*?Parámetros aja personalizados?

*?Nota especial: aquí puede anular los parámetros predeterminados del control. como parámetros de paginación?

*/

//?d.start?=?0;

//console.info(d);

// var?page?=?$('#searchNumber').val();

//page?=?parseInt(page)?||?1;

// d.start?=?(página?-?1)?*?d.length;

}

},

//Especificar campos de enlace de columnas

columnas:?[

{?data:?'sno'?},

{?data:?'sname '?},

{?data:?'ssex'?},

{?data:?'sbirthday'?},

{?data :?'clase' ?}

],

orden:?[

[3,?'desc']

]

});

$("div.toolbar").html(' Ir a página < input?id=" searchNumber"/>Page');

//Evento de paginación vinculado----se activa al cambiar de paginación

//table.on('page.dt',?function?()?{

//var?info?=?table.page.info();

//console.info('¿Mostrando?página:?'?+?info.page?+?'?of?'?+?info.pages);

//} );

//Se activa al dibujar, vinculado al valor del cuadro de texto

table.on('draw.dt',?function?(e,?settings,? data)? {

var?info?=?table.page.info();

//La página aquí comienza a contar desde 0

consola. info( 'Mostrando?página:?'?+?info.page?+?'?de?'?+?info.pages);

$('#searchNumber').val(info

.page?+?1);

});

//Escuchar los cambios en el cuadro de texto

$('#searchNumber').change(function ? ()?{

var?page?=?$(this).val();

page?=?parseInt(page)?||?1;

page?=?page?-?1;

//¿Transferir al índice de página especificado?, preste atención a las mayúsculas

var?oTable?=?$ ('# ejemplo1').dataTable();

oTable.fnPageChange(página);

});

}); ?