¿Existe un complemento de tabla jQuery para Bootstrap?
bootstrap-table?
Ejemplo
var?ViewTableInit?=?function()?{
var?oTableInit?=? new?Object();
//Inicializar tabla
oTableInit.Init?=?function(code)?{
$('#tb_view') .bootstrapTable({
url:?/monitor/monitor/getview?park_code='+code,?//Solicitar la URL de backend (*)
método:?' get' ,?//Método de solicitud (*)
toolbar:?#viewtoolbar',?// Qué contenedor usar para el botón de herramienta
striped:??true,?// Si se muestra el color del interlineado
cache:?false,?//Si se usa el caché, el valor predeterminado es verdadero, por lo que debe configurar esta propiedad (*) en circunstancias normales
pagination:?true ,?//Si mostrar paginación (*)
sortable:?false,?//Si habilitar la clasificación
sortOrder:?
queryParams:?oTableInit.queryParams,? //pasar parámetros (*)
sidePagination:?oTableInit.queryParams,?" server",?/Método de paginación: paginación del cliente, servidor paginación del servidor (*)
pageNumber:?1,?//Carga inicialmente la primera página, primera página predeterminada
pageSize:?9,?//Filas de registros por página (*)
pageList:?[10,?25,?50,?100],?//Número de filas disponibles por página (*)
búsqueda:?true, ?//Sí Mostrar búsqueda en tabla Esta búsqueda es una búsqueda del cliente y no ingresará al servidor, por lo que personalmente creo que tiene poca importancia
strictSearch:?true,
showColumns. :?true,?/ /Si mostrar todas las columnas
showRefresh:?true,?//Si mostrar el botón de actualización
minimumCountColumns:?2,?//El mínimo número de columnas permitidas
clickToSelect:?false,?//Si se debe habilitar la selección de filas mediante clic
uniqueId:?"ID",?//El identificador único de cada fila, generalmente la columna de clave principal
showToggle:?true,?// Si se muestra el botón de cambio entre la vista detallada y la vista de lista
cardView:?false,?// Si para mostrar la vista detallada
detailView:?false, ?//Si se muestra la tabla padre-hijo
columnas:?[{
campo:? ParkingCode',
título:?ParkingCode',
alinear:?' centro'
}, {
campo:? NombreEstacionamiento',
título:?NombreEstacionamiento',
alinear:?' centro'
},?
campo:?' monitor_type',
título:?'monitor_type',
formateador:?typeFormatter,
align:?center'
},? {
campo:?' monitor_result_status',
alinear:?' centro',
formateador:?UpNetWorkFormatter,
título:?' MonitorResultStatus'
campo:?MonitorResultStatus'
},? {
campo:?'
alinear:?' centro',
título:?' ip o dominio'
},{
campo:?' /p>
título:?' Update_time',
título:?Update_time',
alinear:??' dateFormatter
}]
});
};
oTableInit.refresh?=?function(código){
$('#tb_view'). bootstrapTable("refresh",?);
$('#tb_view').{url:'/monitor/monitor/getview?park_code= ' +code});
}
/ Obtener parámetros de consulta
oTableInit.queryParams?=?function(params)?{
var?temp?=?{
límite:?params.limit,?//tamaño de página
desplazamiento:?params.offset,?//número de página
res:?decodeURI(decodeURI(params.search))
};
return?temp;
};
return?oTableInit;
};
El efecto es el siguiente
Si tienes alguna pregunta, puedes enviarme un mensaje privado.