How to put paging in foreach that returns a JSON list with ajax

Navigation
1

I call this function that returns me a list and populates a table in the view, updating every time I pass a parameter through the filter. Everything works perfectly, I just need to put paging because it has search that returns more than 100 lines. I researched a lot, but I did not hit the pluggins. I really wanted to just implement what has already been done. 

function CarregaGridCliente(representante, vendedor) {

        $("#tbl > tbody").empty();
            $.ajax({
                type: "GET",
                url: "/Representantes/Clientes/Listar",
                mtype: 'GET',
                async: false,
                datatype: 'json',
                data: { representante: representante, vendedor: vendedor },
                success: function (data) {

                    $.each(data, function (i, element) {
                        $("#tbl > tbody").append(
                            "<tr>" +
                            "     <td>" + element.A1_COD + "</td>" +
                            "     <td>" + element.A1_LOJA + "</td>" +
                            "     <td>" + element.A1_NOME + "</td>" +
                            "     <td>" + element.A1_CGC + "</td>" +
                            "     <td>" + element.A1_MUN + "</td>" +
                            "     <td>" + element.A1_TEL + "</td>" +

                            "</tr>"
                        );
                    });
                }
        });

    }

    
asked by anonymous 28.03.2018 / 18:52

2 answers

2

Since you already have an object of type List on the server side, you can use the Skip and Take methods to page. They respectively "jump" some items and "grab" some items from a list.

For example, a list with 200 items called list , to page from 50 to 50, taking the third page, would look like this: 

var paginada = lista.Skip(99).Take(50);

In your case, the methods will look something like this: 

public JsonResult Listar(string representante, string vendedor, int pagina, int tamanhoPagina) 
{ 
    var listaRecurso = Dao.Get(representante,vendedor).ToList(); 
    var listaPaginada = listaRecurso.Skip((tamanhoPagina - 1) * pagina).Take(tamanhoPagina);
    return Json(listaPaginada, JsonRequestBehavior.AllowGet); 
}

Note that you will need to switch to the List method plus two parameters, page number and total data you want to return per page

    
28.03.2018 / 19:53
3

To use the dataTables is very simple. I set an example in a few minutes. Follow these steps:

Download the plugin on this link

In step 2 check the option jQuery 3;

In step 3 download the files;

Unzip the files to a folder in your project;

In the head of your html link the required files as shown below: 

<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css">

<script src="DataTables/datatables.min.js"></script>
<script src="DataTables/jQuery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js">    </script>

<script>
$(document).ready(function() {
    $('#myTable').DataTable();
} );
</script>

In your table identify by id: 

<table id="myTable" class="display" style="width:100%">
</table>

The end result is this:

  • Fortranslationusethis link
  • I hope you can help.
29.03.2018 / 20:00
How to create a directory in Python inside a server? Calculate memory address by pointer arithmetic