Esta es una pregunta que responderé más adelante, me aconsejaron que hiciera la pregunta y después diera mi respuesta, así lo hice. Gracias muchachos.
-
1Bienvenido hermano :D Si la situación es de pregunta-respuesta, te recomiendo que edites la pregunta definiendo el problema y luego publiques la respuesta usando el cuadro de abajo. Saludos y muchas gracias por la ayuda, se valora mucho la intención y el código compartido :D por cierto, recuerda visitar es.stackoverflow.com/tour para que obtengas la 1era medalla y sepas cómo funciona el sitio.– fredyfxel 2 nov. 2017 a las 17:38
-
1Gracias hermano.– iviryxavyerel 2 nov. 2017 a las 17:57
-
de nada bro :D estamos para servir, vamos incrementando el power de los desarrolladores hispanos y de los desarrolladores que entiendan español :D– fredyfxel 2 nov. 2017 a las 18:35
1 respuesta
Esta es la respuesta-ejemplo para ayudar a la comunidad. Es por que yo en lo personal le batalle mucho viendo otros ejemplos que hacian lo sencillo muy complicado.
En este ejemplo usé solo linQ y la respuesta Request del datatable que va a el controlador.
Este es el constructor de la tabla datatables la petición se hace a traves de ajax.
var tablai = $( '#tablaPTAimportation' ).DataTable( {
"ajax": {
"url": "/" + NombreCarpetaVirtual + "/PTAI/ListaPTAIServerSide",
"type": "POST",
"datatype": "json",
"data": function ( d )
{
//se envian los parametros externos de fecha inicio y final
d.fechaInicio = $( '#fechaInicio' ).val();
d.fechaFinal = $( '#fechaFin' ).val();
}
},
//especificacion de las columnas a crear
"columns": [
{ "data": "PTA_ID", "name": "ID" },
{ "data": "Transaction_Date", "name": "Transaction Date" },
{ "data": "Status_ID", "name": "Status" },
{ "data": "PO_Number", "name": "PO Number" },
{ "data": "Vendor", "name": "Vendor" },
{ "data": "Project_ID", "name": "Project" },
{ "data": "ChargeTo_ID", "name": "Charge To" }
],
//se especifica que es serverside
"serverSide": "true",
//que columna ordenara y en que forma
"order": [1, "desc"],
//si se mostrara procesando
"processing": "true",
//se oculta el pie de pagina de entries
"bInfo": false,
//se oculta el filtro general
"bFilter": false,
//el mensaje de carga cuando se realice alguna operacion en la tabla
"language": {
"processing": "Requering data... please wait"
}
} );
//aqui se renombran las columnas del HTML
$( tablai.column( 0 ).header() ).text( 'ID' );
$( tablai.column( 1 ).header() ).text( 'Transaction Date' );
$( tablai.column( 2 ).header() ).text( 'Status' );
$( tablai.column( 3 ).header() ).text( 'PO Number' );
$( tablai.column( 5 ).header() ).text( 'Project' );
$( tablai.column( 6 ).header() ).text( 'Charge To' );
//Datetime picker de bootstrap para la fecha de inicio y de final
$( '#fechaInicio' ).datetimepicker( {
allowInputToggle: true,
defaultDate: '',
format: 'DD/M/YYYY'
//esta instruccion actualizara la tabla al ocultarse el pequeño calendario
} ).on( 'dp.hide', function ( e )
{
tablai.draw();
} );
$( '#fechaFin' ).datetimepicker( {
allowInputToggle: true,
defaultDate: '',
format: 'DD/M/YYYY'
} ).on( 'dp.hide', function ( e )
{
tablai.draw();
} );
//cuentan con un boton que blanquea los inputs de las fechas
//esta isntruccion reinicializa la tabla despues de borrar los inputs
$( '#resetearFechas' ).on( 'click', function ()
{
$( '#fechaInicio' ).val( '' );
$( '#fechaFin' ).val( '' );
tablai.draw();
} );
//filtro ydcf plug in de datatables
yadcf.init( tablai, [{
column_number: 5,
filter_type: "text",
filter_container_id: "ProjectPTA",
filter_delay: 1000
}, {
column_number: 0,
filter_type: "text",
filter_container_id: "NumberPTA",
filter_delay: 1000
}, {
column_number: 2,
filter_type: "text",
filter_container_id: "StatusPTA",
filter_delay: 1000
}] );
Este es el método que procesa la petición:
//Este es un metodo post
[HttpPost]
//Creamos un metodo el cual dara como resultado un Json este tendra todos los registros de la tabla en cuestion
//no recibe parametros ya que el Request de datatables es el que lo ofrece.
public JsonResult ListaPTAIServerSide()
{
//se ejecuta la sentencia
try
{
//Parametros de configuracion para la llamada del servidor
//estos son los parametros que trae el Request del ajax
//este parametro indica desde que numero debera traer los resultados de la tabla se usa para el paginador
int start = Convert.ToInt32(Request["start"]);
//este nos indicara cuantos resultados se mostraran en la tabla de acuerdo a loq ue el usuario eligio en el dropdown de la tabla ejem 10,25,50,100
int length = Convert.ToInt32(Request["length"]);
//este parametro indica que columna sera la que se ordene, en este ejemplo yo no lo uso.
string sortColumnVendor = Request["columns["+Request["order[0][column]"]+"][Vendor]"];
//este nos dice si sera ascendente o descendente en este ejemplo yo no lo uso
string sortDirection = Request["order[0][dir]"];
//este es el search value general como yo uso ydcf filter plugin para datatables yo no lo uso.
string searchValue = Request["search[value]"];
//Cuando usas ydcf para habilitar filtros por columna los recibes en el Request señalando el numero index de la columna ademas de los parametros
//search y value que nos dara el valor del input que ydcf crea
string sSearch_0 = Request["columns[0][search][value]"];//PTA Number
string sSearch_2 = Request["columns[2][search][value]"];//estatus
string sSearch_5 = Request["columns[5][search][value]"];//project
//en este caso yo necesitaba un Range date para las fechas en filtro de ydcf me daba vacio cada ves que lo invocaba asi que mande mis propios parametros
//con la fecha de inicio y la fecha de fin
string sSearch_1 = Request["fechaInicio"];//fechas
string sSearch_6 = Request["fechaFinal"];
//normalmente al iniciar la pagina no hay ningun filtro habilitado es por esto que requiero todos los valores asi que asigno fechas extremas
//solo para la inicializacion
DateTime fechaInicio = DateTime.ParseExact("01/1/0001", "dd/M/yyyy", null);
DateTime fechaFin = DateTime.ParseExact("31/12/9999", "dd/M/yyyy", null);
//valido si viene vacio es que debo mostrar todos los datos
//en caso contrario convierto la fecha a datetimne
if (sSearch_1 != "")
{
fechaInicio = DateTime.ParseExact(sSearch_1,"dd/M/yyyy",null);
}
if (sSearch_6 != ""){
fechaFin = DateTime.ParseExact(sSearch_6, "dd/M/yyyy", null);
}
//En los demas ejemplos que vi en la internet para mvc lo que hacian era requerir completamente todos los datos por ejemplo en mi caso eran mas de 78 mil
// esto provocaba que en cada peticion tuviese que volver a llenar una lista de 78 mil
//luego sobre esta lista hacian el filtrado y ya enviaba los 10 requeridos pero en loq ue llenaba la lista tardaba mas de 15 segundos en cargar una sola
//peticion de busqueda, esto es prohibitivo en cualquier sistema.
/*en mi caso lo que hice fue que el motor de base de datos se encargara de todo el proceso y con linQ simplemente hice una consulta con todo el filtrado
*/
var QRY_SY_Importation_Filtrado = (from i in db.SY_Importation
//hago los joins requeridos para enviar datos procesados
join s in db.CT_Status on i.Status_ID equals s.Status_ID
join p in db.CT_Projects on i.Project_ID equals p.Project_ID
join c in db.CT_ChargeTo on i.ChargeTo_ID equals c.ChargeTo_ID
//inicio el filtrado Contains() es como LIKE de SQL
where s.Status.Contains(sSearch_2) && p.Project.Contains(sSearch_5) && i.PTA_ID.Contains(sSearch_0)
//Filtrado de rango de fechas
&& i.Transaction_Date >= fechaInicio && i.Transaction_Date <= fechaFin
//lo agrego a una lista string basada en el modelo
select new listas.SY_ImportationModListTable()
{
PTA_ID = i.PTA_ID,
Transaction_Date = i.Transaction_Date.ToString(),
Status_ID = s.Status,
PO_Number = i.PO_Number,
Vendor = i.Vendor,
Project_ID = p.Project,
ChargeTo_ID = c.ChargeTo
//es muy importante que Skip() lleve antes OrderBy() si no nos dara errores, esta linea es para el pager y para
//tomar los que el usuario eligio
}).OrderBy(i => i.Transaction_Date).Skip(start).Take(length);
//se inicializa la lista
List<listas.SY_ImportationModListTable> data = new List<listas.SY_ImportationModListTable>(QRY_SY_Importation_Filtrado);
//se envia la respuesta
var json = Json(new { data = data, JsonRequestBehavior.AllowGet });
// Se amplia el largo de la respuesta json si no dara errores en miles de registros
json.MaxJsonLength = 500000000;
return json;
}
//cualquier error se cacha y se regresa
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
En la red habia un ejemplo con clases y toda la cosa pero era demasiado redundante y hasta cierto punto inentendible, hubo otro ejemploq ue implemente pero era uno que rellenaba una lista y despues filtraba esa lista y enviaba solo 10 resultados pero se tardaba 15 segundos en terminar, con este ejemploa lo mucho en cada petición se va tardar 2 segundos. Espero no estar infringiendo ninguna regla al ponerlo aqui, de hehco lo iba a poner en el stack en ingles pero pense que seria mejor que mi primer post en español fuera una contribución saludos. Cualquier pregunta a sus órdenes.