【发布时间】:2021-02-23 20:30:06
【问题描述】:
我需要你的帮助。
目前我的查询返回超过 2000 条记录,在通过存储过程从 sql server 获取记录后,我将它们发送到表(我使用 DataTables 库 1.10.19)当它开始形成表格和相应的分页时,问题是它需要超过30秒或更多才能显示表格中的内容,我该怎么做才能让它只显示用户看到的结果(每页 10 条记录)并计算如果用户前进到下一条记录并给我带来以下 10 条记录或页面将如何的其他页面?.
这是我的代码:
控制器:
public JsonResult Get_Pacientes(int IdEstatus)
{
List<Paciente> l = new List<Paciente>(Get_RowsPac(IdEstatus));
var jsonResult = Json(new { success = true, lcontenedor= l}, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
**JavaScript:**
function ObtieneListaEmp(id) {
$('#fader').css('display', 'block');
var EnviaDatos =
{
//"e.CVE_EMPLEADO": $('#NOMINA').val(),
"IdEstatus": id,
};
$.ajax({
url: '../Empleado/EmpleadosXEstatus',
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'json',
data: JSON.stringify(EnviaDatos),
success: function (response) {
$('#fader').css('display', 'none');
if (response.success) {
AgregaTablaEmpPacTest(); //this function adds the table header
var data = [];
data = response.lcontenedor;
setTimeout(function () {
//aqui va la tarea
$('#tbl').DataTable({
data: data,
deferRender: true,
"columns": [
//{ "data": "CLAVE_AFILIACION" },
{ // render //clave afilacion
"data": function (data, type, row, meta) {
return "<a href=\"#\" onclick='LlamaRegistro(" + '"' + data.CLAVE_AFILIACION + '"' + ")'>" + data.CLAVE_AFILIACION + "</a>";
}
},
{ "data": "NOMINA" },
{
data: null,
render: function (data, type, row) {
return row.NOMBRE + ' ' + row.APELLIDO_PAT + ' ' + row.APELLIDO_MAT;
}
},
{ "data": "TELEFONO_CASA" },
{ "data": "CELULAR" },
{ "data": "SECRETARIA" },
{ "data": "DIRECCION" },
{ "data": "PUESTO" },
{ "data": "EDAD" },
{ "data": "OBSERVACION" },
{ "data": "FECHA_SEG" },
{ "data": "DESC_ESTATUS_EVO" },
{ "data": "FECHA_PRUEBA" },
{ "data": "FECHA_RESULTADO" },
{ "data": "LUGAR_DE_EXP" },
{ "data": "DESC_ESTATUS_PRU" },
{ "data": "FECHAINICIO_INC" },
{ "data": "DIASINCAPACIDAD_INC" },
{ "data": "FECHAFIN_INC" },
//{ "data": "FECHAFIN_INC" },
{ // render IMPRIMIR
"data": function (data, type, row, meta) {
return "<button type=\"button\" class=\"btn btn-secondary fa fa-print C_Imprimir\">";
}
},
],
"columnDefs": [
{
"targets": [3],
"visible": false,
"searchable": false
},
{
"targets": [4],
"visible": false,
"searchable": false
}
],
dom: 'Bfrtip',
buttons: [
//'copy', 'csv',
'excel', {
extend: 'pdf',
orientation: 'landscape',
pageSize: 'LEGAL'
}, {
extend: 'print'//,
//messageTop: 'Lista de Empleados Registrados' + response.lOrdenesTrabajo[0].NOMBRE_PROV
, text: 'Imprimir'
}
],
"order": [7, 'desc'],//ordernar por fecha de menor a mayor
"language": {
"scrollX": true,
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
}
});
}, 50);
//AgregaTablaEmpPac(response.lcontenedor);
}
else {
alert(response.responseText);
}
},
error: function (xhr) {
$('#fader').css('display', 'none');
alert('Ocurrio un Error Inesperado.' + $('#Datos_ID_FechaIn').val());
}
})
};
【问题讨论】:
-
也许做多个ajax调用并逐块检索行?
-
一种方法是使用server-side processing - 它发送数据子集,但在这种情况下,服务器会根据用户在数据表中的操作来负责分页、排序和过滤。另一个(也许)是使用scroller 扩展名。 (我使用了服务器端,但没有使用滚动条扩展。)
标签: javascript c# jquery model-view-controller datatables