Puede consultar el siguiente contenido para esto:
El complemento de tabla JQuery.dataTables agrega un salto a la página especificada
Solución
p>
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 p>
console.info('¿Mostrando?página:?' ?+?info.page?+?'?of?'?+?info.pages);
$('#searchNumber ').val(info.página?+?1);
$('#searchNumber').val(info.página?+?1);
p>
} );
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 p>
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? p>
*/
//?d.start?=?0;
//console.info(d); p>
// var?page?=?$('#searchNumber').val();
//page?=?parseInt(page)?||?1; p>
// 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(); p>
//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; p >
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);
});
}); ?