#javascript #c# #jquery #model-view-controller #datatables
#javascript #c# #jquery #модель-представление-контроллер #таблицы данных
Вопрос:
Мне нужна ваша помощь.
В настоящее время мой запрос возвращает более 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 jsonResu<
}
** 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());
}
})
}; Комментарии:
1. Может быть, выполнить несколько вызовов ajax и извлекать строки по частям?
2. Один из подходов заключается в использовании обработки на стороне сервера — он отправляет подмножества данных, но в этом случае сервер берет на себя ответственность за разбиение на страницы, сортировку и фильтрацию на основе действий пользователя в таблице данных. Другой (возможно) — использовать расширение скроллера . (Я использовал серверную часть, но не расширение скроллера.)
Ответ №1:
у меня такая же проблема, я использую этот тип кода, чтобы просто отправить нужное количество записей:
[DataContract]
public class Course
{
[DataMember] public string[] UrlsCourse;
[DataMember] public string BackgroundImage;
[DataMember] public string KeyWords;
[DataMember] public string TitleCourse;
[DataMember] public string[] stats;
[DataMember] public string description;
public Course(string[] urlsCourse, string backgroundImage, string keyWords, string titleCourse, string[] stats, string description)
{
UrlsCourse = urlsCourse;
BackgroundImage = backgroundImage;
KeyWords = keyWords;
TitleCourse = titleCourse;
this.stats = stats;
this.description = description;
}
}
[DataContract]
public class SearchCourses
{
[DataMember] public readonly int maxRecords;
[DataMember] public int maxRecordsPerPage;
[DataMember] public int currentRecord;
[DataMember] public int currentPage;
[DataMember] public int maxPages;
[DataMember] public int[] minmax;
[DataMember] public int maxRecordsSent;
[DataMember] public int currentmaxLinks;
[DataMember] public Course[] currentDatas;
[DataMember] public string[] categories;
public Course[] search;
public string[] courses;
public int maxLinks;
public SearchCourses(string[] courses, int maxRecordsPerPage = 10, int currentPage = 1, int currentRecord = 0, int maxLinks = 9)
{
this.currentPage = currentPage;
this.maxRecordsPerPage = maxRecordsPerPage;
this.currentRecord = currentRecord;
this.courses = courses;
this.maxRecords = courses.Length;
this.maxLinks = maxLinks;
this.search = courses.Select(r => getRecord(r.Split(new string[] { "rn" }, StringSplitOptions.None))).ToArray();
categories = this.search.Select(c => c.KeyWords.Split('-')[0].Trim()).Distinct().ToArray();
currentDatas = search.Take(maxRecordsPerPage).ToArray();
maxRecordsSent = maxRecords;
maxPages = maxRecordsSent / maxRecordsPerPage 1;
this.currentPage = 1;
maxPages = maxRecordsSent / maxRecordsPerPage 1;
currentmaxLinks = maxLinks > maxPages ? maxPages : maxLinks;
minmax = new int[] { 1, currentmaxLinks };
}
public string GetJSON()
{
string json;
using (var ms = new MemoryStream())
{
DataContractJsonSerializer js = new DataContractJsonSerializer(typeof(SearchCourses));
js.WriteObject(ms, this);
ms.Position = 0;
using (var sr = new StreamReader(ms))
{
json = sr.ReadToEnd();
}
}
return json;
}
это сервер, который выдает разные списки курсов, поэтому я сохраняю последний поиск в «поиске», но просто отправляю нужные данные в currentDatas (я сериализуютолько currentDatas не поиск с помощью метода getJSON()).
у меня есть закладка с количеством страниц…и так далее..
я управляю закладкой, используя максимальное количество страниц (здесь у меня 9 закладок ссылок), и я управляю кнопками next и forward page .. и так далее..