Question

我试图对包含许多行的表进行分页，但我遇到了问题。该表加载了从服务器接收的数据，这些数据带来1个共同的数据称为区域。如果它们是相同的区域，则在特殊行中分组以进行单击扩展或保存，这是一种手风琴。问题在于分页不考虑这一点，然后是失去的群体感。

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

这里有一些像codepen这样的东西，所以你可以看到我做的更多或更少。

Codepen example

jquery-mobile分页表

0 个答案: