0

Estoy empezando a aprender jquery, la solicitud es la siguiente:

  1. Mostrar un listado de facturas pendientes de pagar (ok)
  2. Colocar un filtro en el nombre del proveedor (ok)
  3. Hacer sumatorias en el tfoot (ok)
  4. Hacer un ordenamiento de todas las columnas (ok)
  5. Seleccionar ciertos documentos y de acuerdo a ellos sumarlos para hacer una propuesta de pagos (ok)
  6. Solo falta que mis documentos seleccionados, por medio de alguna función (estaba pensando en un botón), me permita ocultar los que no están seleccionados y otro botón para mostrarlos (sin perder la referencia de los documentos que previamente seleccioné).

Las librerías que uso son las siguientes:

      <link href="/tooltip/themes/4/style_rh_rp09.css" rel="stylesheet" type="text/css"  id="" media="print, projection, screen" />
      <script type="text/javascript" src="/JQuery_tablesorter/jquery-latest.js"></script>
      <script type="text/javascript" src="/JQuery_tablesorter/jquery.tablesorter.min.js"></script>
      <script type="text/javascript" src="/JQuery_tablesorter/jquery.tablesorter.js"></script>          
      <link rel="stylesheet" type="text/css" href="/css/jquery.datatables.yadcf.css">                          
      <link rel="stylesheet" href="/yadcf-master/jquery.datatables.yadcf.css">           
      <script src="/js/jquery.dataTables.yadcf.js"></script>          
      <script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>          
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>           
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>           
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>                                                                                     
      <script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>           
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />            
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
      <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>           
      <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>          
      <script type="text/javascript" src="/JQuery/js/jquery.floatThead.js"></script>
      <script type="text/javascript" src="/JQuery/js/jquery.floatThead.min.js"></script>
      <script type="text/javascript" src="/JQuery/js/jquery.floatThead-slim.min.js"></script>
      <script type="text/javascript" src="/JQuery/js/jquery.floatThead-slim.js"></script>
      <script type="text/javascript" src="/JQuery/js/jquery.mask.js"></script> 

El siguiente código es para que me realice las 5 funciones antes mencionadas:

var oTable;

$(document).ready(function() {    


   $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass(''row_selected'') ) {
            $(this).removeClass(''row_selected'');
        }
        else {
            oTable.$(''tr.row_selected'').removeClass(''row_selected'');
            $(this).addClass(''row_selected'');
        }
    });   

    /* Add a click handler for the delete row */
    $(''#boton'').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );

    //$(''#example'').children().eq(1).empty.css("border","trick solid red");

    oTable = $(''#example'').DataTable( {        
      scrollY: 300,
      scrollX: true,
      paging:  false,
      keys:    true,
      processing: true,        
      //"ajax": "/custom/data-tables/process.php",    
      aaSorting: [[2,''asc'']],

      //fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                //if ( aData[0] == "5" )
                //{
                  //  $(''td:eq(10)'', nRow).css(''background-color'', ''Red'');
                //}
                //else if ( aData[2] == "4" )
                //{
                  //  $(''td:eq(10)'', nRow).css(''background-color'', ''Orange'');
                //}
      //},

      fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                if ( aData[0] == "10" )
                {
                    $(''td:eq(10)'', nRow).css(''background-color'', ''#FF0000'');
                }
                /*else if ( aData[2] >="1" && aData[2] <="10" )
                {
                    $(''td:eq(10)'', nRow).css(''background-color'', ''#FFFF00'');
                }
                else if ( aData[2] = "0" && aData[2] < "10" )
                {
                    $(''td:eq(10)'', nRow).css(''background-color'', ''#38D765'');
                } else 
                {                    
                    $(''td:eq(10)'', nRow).css(''background-color'', ''#FFFFFF'');
                }*/
      },

      initComplete: function () {
            this.api().columns(2).every( function () {                    
                var column = this;
                var select = $(''<select><option value=""></option></select>'')
                    .appendTo( $(column.header()).empty() )
                    .on( ''change'', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        ); 
                        column
                            .search( val ? ''^''+val+''$'' : '''', true, false )
                            .draw();
                    } ); 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( ''<option value="''+d+''">''+d+''</option>'')
                } );
           } );
        },


         footerCallback: function ( row, data, start, end, display ) {
          var api = this.api(), data;

          // Remove the formatting to get integer data for summation
          var intVal = function ( i ) {
              return typeof i === ''string'' ?
                  i.replace(/[\$,]/g, '''')*1 :
                  typeof i === ''number'' ?
                      i : 0;
          };
          //----------------------------------------------------------------
          // MD -Total over all pages
          total1 = api
              .column(8)
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              } );   
          // Total over this page
          pageTotal1 = api
              .column(8, { page: ''current''} )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );   
          // Update footer
          //$( api.column( 8 ).footer() ).html(''$''+pageTotal1 +'' ( $''+ total1 +'' total)'');
          $(api.column(8).footer()).html(''$''+ Number(pageTotal1).toLocaleString(''en'')+''<br>($ '' + Number(total1).toLocaleString(''en'')+'' total)'' );

      }


    // fin de datatable
    } );

   $(''#example tbody'').on(''click'', ''tr'', function () { 
       $(this).toggleClass(''selected'');
        var totalSUM=0;
        $("tbody tr.selected").each(function () {
            var getValue = $(this).find("td:eq(10)").html().replace("$", "");
            var filteresValue=getValue.replace(/\,/g, '''');                
            totalSUM += Number(filteresValue);
            //console.log(filteresValue);
        });

         //$(''#selectedtotal'').html(totalSUM);          
        //console.log(Number(totalSUM).toLocaleString(''en''));
        //console.log($(''tfoot tr > th'').eq(1).html( ''$''+ $(''#selectedtotal'').html()));

        $("span#selectedtotal1").html(Number(totalSUM).toLocaleString(''en''));


    });


// fin de ready        
} );


    /* Get the rows which are currently selected */
    function fnGetSelected( oTableLocal )
    {
        return oTableLocal.$(''tr.row_selected'');
    }

Este es el código HTML:

    <TR  role="row">
       <TH ROWSPAN="1">No.</TH>
       <TH ROWSPAN="1">Código</TH>
       <TH ROWSPAN="1">Proveedor</TH>    
       <TH ROWSPAN="1">No. Documento</TH>
       <TH ROWSPAN="1">Cta Mayor</TH>        
       <TH ROWSPAN="1">Fecha Doc.</TH>
       <TH ROWSPAN="1">Fecha Pago</TH>
       <TH ROWSPAN="1">Vencimiento</TH>
       <TH ROWSPAN="1">Importe MD</TH>
       <TH ROWSPAN="1">MD</TH>
       <TH ROWSPAN="1">Importe ML</TH>
       <TH ROWSPAN="1">ML</TH>
       <TH ROWSPAN="1">PROPUESTA</TH>
       <TH ROWSPAN="1">Observaciones</TH>
       <TH ROWSPAN="1">Usuario SAP</TH>

       <TH ROWSPAN="1" BGCOLOR="#DF0101" > > 90 </TH>
       <TH ROWSPAN="1" >61 - 90</TH>
       <TH ROWSPAN="1" >31 - 60</TH>
       <TH ROWSPAN="1" >1 -30</TH>        
       <TH ROWSPAN="1">1-7</TH>
       <TH ROWSPAN="1">8-14</TH>
       <TH ROWSPAN="1">15-21</TH>
       <TH ROWSPAN="1">22-28</TH>
       <TH ROWSPAN="1">29-35</TH>        
       <TH ROWSPAN="1">36-42</TH>
       <TH ROWSPAN="1">43-49</TH>
       <TH ROWSPAN="1">50-56</TH>
       <TH ROWSPAN="1" >57</TH>    
       <TH ROWSPAN="1" >Tipo Pago</TH>
        </TR>
    </thead>

    <tfoot>
        <tr>
            <th colspan="8" style="text-align:right;">Total:</th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th colspan="4"></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
            <th ></th>
        </tr>
    </tfoot>        
    <tbody>

<TR id="TH1">
   <TH ROWSPAN="1">270</TH>
   <TH ROWSPAN="1" >20792</TH>
   <TH ROWSPAN="1">JUANA ESCUTIA</TH>
   <TH ROWSPAN="1">1900113645-1</TH>
   <TH ROWSPAN="1">201201</TH>
   <TH ROWSPAN="1">27/10/2016&nbsp;</TH>
   <TH ROWSPAN="1">11/12/2016&nbsp;</TH>
   <TH ROWSPAN="1">-10&nbsp;</TH>
   <TH ROWSPAN="1">           2,476</TH>
   <TH ROWSPAN="1">MXN</TH>
   <TH ROWSPAN="1">           2,476</TH>
   <TH ROWSPAN="1">MXN</TH>
   <TH ROWSPAN="1">&nbsp;</TH>
   <TH ROWSPAN="1">6258396</TH>
   <TH ROWSPAN="1">KBENITEZ</TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1">2,476</TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
   <TH ROWSPAN="1"></TH>
</TR>
        </tbody>
</table>

Me gustaría que me pudieran ayudar a resolver la 6 condición. Y de igual manera si existe retroalimentación para el mejoramiento y rendimiento del código se lo agradecería.

5
  • 1
    Deberías importar solo una versión de cada librería. Tienes una versión .min.js y una solo .js, únicamente deberías utilizar la versión .min.js.
    – Garrizano
    Commented el 1 dic. 2016 a las 21:12
  • ¿Podrías incluir el HTML? Intenta llevar la pregunta a un ejemplo mínimo verificable.
    – Mariano
    Commented el 1 dic. 2016 a las 21:18
  • 1
    Intenta reducir la pregunta a lo que es exactamente el problema, no hay necesidad de incluir aquello que ya funciona... Hace la pregunta densa y muy dificil de replicar
    – DaniP
    Commented el 2 dic. 2016 a las 13:45
  • Creo que quieres hacer algo añadiendo ademas todos los plugins que ocupas y que no tienes idea de como funcionan :( así no se puede amigos.
    – elporfirio
    Commented el 3 dic. 2016 a las 15:52
  • parece que estoy viendo mi sistema con esa cantidad de plugins jaja. Se me hace que lo que quieres es un filtrado personalizado, ¿Tiene algún parámetro en especifico los que seleccionas?
    – bypabloc_
    Commented el 24 feb. 2017 a las 14:08

1 respuesta 1

1

La pregunta no se entiende bien. Según creo necesitas simplemente mostrar/ocultar filas de una tabla html por jQuery en función de si están seleccionadas o no.

Lo más sencillo sería añadir una primera columna a la tabla que contenga elementos input de tipo checkbox que permitan representar si la fila está seleccionada o no.

Después según comentas, tendrías 2 botones: Mostrar/Ocultar seleccionados. Sólo habría que implementar una función que te devuelva los checks seleccionados de tu tabla y a partir de ahí, obtener su elemento <tr> parent y realizar las operación adecuada:

.show() o .hide() sobre el elemento <tr>.

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.