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

Question

I call this function which returns me a list and populates a table in the view, updating every time I pass a parameter through the filter. Everything works perfectly, just need to put paging, because has search that returns more than 100 lines. I did a lot of research, but I was not right to use the pluggins. I really wanted to just implement what is already 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>"
                        );
                    });
                }
        });

    } 

Answer 1

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

Download the plugin on this link

In step 2 check option jQuery 3;

In step 3 download the files;

Unzip the files in a folder in your project;

At the head of your html link the required files as example 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 through id:

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

The end result is this:

• For translation use this link
• I hope I can help.

Answer 2

As you already have an object of the type List on the server side, you can use the methods Skip and Take for paging. They respectively "skip" some items and "take" some items from a list.

For example, a list of 200 items called list, to page 50 by 50, taking the third page, would be 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); 
} 

Understand that it will be necessary to pass to the method List plus two parameters, the page number and the total data you want to return per page