jQuery Datatables - Hide Cells (td) not selected

Question

jQuery Datatables - Hide Cells (td) not selected

Navigation

#1 by (1 votes)

0

I am starting to learn jquery , the request is as follows:

Show a list of invoices pending payment (ok)

Place a filter in the provider's name (ok)

Make summations in tfoot (ok)

Make an ordering of all the columns (ok)

Select certain documents and according to them add them up to make a payment proposal (ok)

Just missing that my selected documents, by means of some function (I was thinking of a button), allows me to hide the ones that are not selected and another button to show them (without losing the reference of the documents that I previously selected). / li>

The libraries I use are the following:

      <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>

The following code is for me to perform the 5 functions mentioned above:

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'');
    }

This is the HTML code:

    <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>

I would like you to help me solve the condition. And in the same way if there is feedback for the improvement and performance of the code I would appreciate it.

javascript jquery datatables

asked by ALONDRA PEREZ 01.12.2016 в 22:06

source

1 answer

this.dispose () in Eclipse does not work Error updating project Pods

score 1 · Answer 1

The question is not well understood. According to I think you need to simply show / hide rows of an html table by jQuery depending on whether they are selected or not.

The simplest way would be to add a first column to the table that contains input elements of type checkbox that allow to represent if the row is selected or not.

Then as you say, you would have 2 buttons: Show / Hide selected. You just have to implement a function that returns the selected checks of your table and from there, get your <tr> parent element and perform the appropriate operation:

.show() or .hide() on element <tr> .