jquery-mobile paginated table

217 Views Asked by At

I'm trying to paginate a table with many rows but I have a problem. The table is loaded with data received from the server, these data bring 1 data in common called territory. If they are the same territory the grouped in a special row to give click expands or saved, a kind of accordion. The problem is that paging does not consider this, then the sense of the group that is lost.

<table border="0" id="proforma" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-button-theme="b"  data-column-btn-theme="b" data-column-btn-text="Ver más" data-column-popup-theme="b">
            <thead>
                <tr class="ui-bar-d">
                    <th class="header_table cliente_table" data-priority="1">Cliente</th>
                    <th class="header_table real_table" data-priority="1">Real (%)</th>
                    <th class="header_table proy_table" data-priority="1">Proy (%)</th>
                    <th class="header_table falta_table" data-priority="1">Falta (M$)</th>
                    <th class="header_table cod_table" data-priority="5">Código</th>
                    <th class="header_table dato_table" data-priority="6">Dirección</th>
                </tr>
            </thead>
</table>

Js

success: function(result) {
            $('#avance_actual').text("Avance tiempo "+result.valor+"%");

            var reporte_ordenado = groupBy(result.reporte, function(item){
              return [item.ACPP_Territorio];
            });
            //console.log(reporte_ordenado[0]);
            $.each(reporte_ordenado, function(index, result) {
                $.each(result, function(k, cliente){
                    if(cliente.ACPP_Tipo == 0){
                        var row_expand = '<tr class="header_table_expand expand">';
                        row_expand+= '<th class="cliente_table" colspan="1"><div class="div_client"><span class="sign" data-role="button" data-icon="delete"></span>'+ cliente.ACPP_Cliente+'</div></th>';
                        if(cliente.ACPP_Proforma < 50) //rojo
                            row_expand+= '<td class="real_table border_red">'+ cliente.ACPP_Proforma +'</td>';
                        else //verde
                            row_expand+= '<td class="real_table border_green">'+ cliente.ACPP_Proforma +'</td>';
                        row_expand+= '<td class="falta_table">'+ cliente.ACPP_Proyectado +'</td>';
                        row_expand+= '<td class="falta_table">'+ cliente.ACPP_Faltante +'</td>';
                        row_expand+= '<td></td>';
                        row_expand+= '<td></td>';
                        row_expand+= '</tr>';
                        $('#proforma').append(row_expand);
                    }else{
                        var row = '<tr>';
                        row+= '<td class="cliente_table"><div class="div_client">'+ cliente.ACPP_Cliente +'</div></td>';
                        if (cliente.ACPP_Proforma < 50) //rojo
                            row+= '<td class="real_table border_red">'+ cliente.ACPP_Proforma +'</td>';
                        else // verde
                            row+= '<td class="real_table border_green">'+ cliente.ACPP_Proforma +'</td>';
                        row+= '<td class="falta_table">'+ cliente.ACPP_Proyectado +'</td>';
                        row+= '<td class="falta_table">'+ cliente.ACPP_Faltante +'</td>';
                        row+= '<td class="cod_table">'+ cliente.ACPP_CodigoSAP +'</td>';
                        row+= '<td class="dato_table">'+ cliente.ACPP_Direccion +'</td>';
                        row+= '</tr>';
                        $('#proforma').append(row);
                    }   
                });
            });

        },
        error: function(xhr, status, error) {
            navigator.notification.alert(error);
        }

$(document).on('vclick', ".header_table_expand", function() {
  $(this).toggleClass('expand').nextUntil('tr.header_table_expand').slideToggle(100);
});

Here let something like a codepen, so you can see more or less what I do.

Codepen example

0

There are 0 best solutions below