Estoy empezando a aprender jquery
, la solicitud es la siguiente:
- Mostrar un listado de facturas pendientes de pagar (ok)
- Colocar un filtro en el nombre del proveedor (ok)
- Hacer sumatorias en el
tfoot
(ok) - Hacer un ordenamiento de todas las columnas (ok)
- Seleccionar ciertos documentos y de acuerdo a ellos sumarlos para hacer una propuesta de pagos (ok)
- 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 </TH>
<TH ROWSPAN="1">11/12/2016 </TH>
<TH ROWSPAN="1">-10 </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"> </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.