0

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.

3
  • 1
    Bienvenido 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.
    – fredyfx
    el 2 nov. 2017 a las 17:38
  • 1
    Gracias hermano. el 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
    – fredyfx
    el 2 nov. 2017 a las 18:35

1 respuesta 1

2

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.