Cómo utilizar el complemento de tabla JQuery.dataTables para agregar una función de salto a una página específica
Puede consultar lo siguiente:
El complemento de tabla JQuery.dataTables agrega la función de saltar a la página especificada
Solución
1. Agregue una barra de herramientas personalizada e incrústela en el cuadro de texto
[javascript]?view Plain?copy "dom":?' ¿barra de herramientas?
[javascript]?view Plain?copy
// ¿Establecer contenido de la barra de herramientas?
//l?
//i?-?Tabla?información?resumen?
//p?-?paginación?control?
//r?Procesar elementos de visualización
[javascript] Ver texto sin formato
$("div.toolbar").html('? lt; b?style= "color: rojo"gt; saltar a la páginalt;/bgt;lt;input?id="searchNumber"/gt;lt;b?style="color: rojo;"gt;pagelt;/bgt;') ;?
2.Escuche el evento de cambio del cuadro de texto y ejecute el método de transferencia de página del complemento
[javascript]?view Plain?copy
/ / Transferir a el índice de página especificado?
Var
var?oTable?=?$('#example1').dataTable();?
oTable .fnPageChange( page);?
3. Vincula el valor del cuadro de texto después de que el complemento se haya dibujado correctamente
[javascript]?view Plain?copy
// ¿Se activa al dibujar, vinculado al valor del cuadro de texto?
table.on('draw.dt',?function?(e,?settings,?data)?{
var .info=?table.page.info();?
//Esta página comienza desde 0?
console.info('¿Mostrando? página:?? ');? ?info.página? ?info.páginas);?
$('#número de búsqueda').val(info.página? ?1);? });?
II. Código de ejemplo completo
[html]?view Plain?copy
lt; "¿mesa? tabla-hover?table-striped"gt;?
lt;theadgt;?
lt;trgt;?
lt;thgt; ;/ cosa;?
lt;thgt;Namelt;/thgt;?
lt;thgt;Genderlt;/thgt;?
lt;thgt; Cumpleaños; /thg
t;?
lt;thgt;Classlt;/thgt;?
lt;/trgt;?
lt;/theadgt;?
lt;/tablegt;?
[javascript]?{
/ ¿Observas que el método se llama DataTable? $('#example1').DataTable({?
"dom":?' llt; "toolbar"gt;frtip',?
"dom":' llt; "toolbar">frtip',?
"pagingType":? "full_numbers",?
longitudMenú: [3,?5,?10],?
processing:?true, // ¿Quieres usar una barra de progreso?
serverSide:?true, // ¿Quieres habilitar la carga de la base de datos
ajax:? {
url: ?/tableone/getlist', ?
tipo: 'publicación', ?
datos: ?{
d.name?张Three'; ?
/*?
*? ¿Personalizar los parámetros de aja
*? ¿Parámetros predeterminados, como parámetros de paginación
*/?
//?d.start?=?0;?
//console.info( d);?
//var?page?=?$('#searchNumber').val();?
//page?=?||?1; ?
/d.start?=?(página?-?1)?*?d.length;?
}?
},?
// ¿Especificar el campo de la columna de enlace?
columns:?[?
{?data:?},?
{ ?datos:?｝,?
{?datos:?｝,?
{?datos:?｝,?
{?datos:?
],?
pedido:?[
[3, desc']?
]?
});?
$("div.toolbar").html('amp;nbsp;lt;b?style="color: red"gt; Saltar al primero lt;/bgt;lt ; input?id="searchNumber"/gt;lt;b?style="color: red;"gt;pagelt;/bgt;');
// Vincular evento de paginación---- ¿Se activará al cambiar de paginación?
/table.on('page.dt',?function?()?{
//var?info?=?table.page.info();?
//console.info('¿Mostrando? página:?');?? ?info.page? ?info.pages);?
//});? p> p>
// ¿Se activa al dibujar, vinculado al valor del cuadro de texto?
table.on('draw.dt',?función?(e,?configuración,?datos)?{
var.info=?table.pag
e.info();?
// ¿Esta página comienza desde 0?
console.info('¿Mostrando? página:??');?? ?info.page? ?info.pages);?
$('#searchNumber'). val(info.page? ?1);?
});?
//¿Escuchar los cambios en el cuadro de texto?
$('#searchNumber').cambiar(función?()?{
var?$(this).val();?
página ?=?parseInt(page)?||?1;?
page?=?page?-?1;?
¿Ir al índice de página especificado
Var?
var?oTable?=?$('#example1').dataTable();?
oTable.fnPageChange(página);?
}});?
}});?