Using Jquery Ajax on JSP to display on Datatables

问题

This is my first time using Jquery Ajax.

The context is that, i'm trying to display more than 10000 rows of data on Datatable, what i did previously was just to use my servlet to forward my Arraylist of data to the JSP, then loop through and display the data onto display data.

It was taking too much to load the datatables. So i decided that i want to try to use Jquery Ajax to see if that will help the issue.

I'm currently facing some issues implementing it, can anyone help me?

I'm using GSON to serialize my arraylist.

servlet.java

 String json =  gson.toJson(listS);
...

request.setAttribute("listS", json);
request.getRequestDispatcher("WEB-INF/index.jsp").forward(request, response);

index.jsp

String list =  (String) request.getAttribute("listStartup");
    ......

                    <td>Insert 1st Element</td>
                    <td>Insert 2nd Element</td>

                 <%
               };

    ......


    <script>

    $(function () {
        <% list =  (String) request.getAttribute("listS");%> 
        $("#sp").DataTable({
    "scrollY": 500,
            "scrollX": true,
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "processing": true,
            "serverSide": true,
            "ajax" : list

        });
      });



</script>

My JSONarray is structured like this, this is the output

[
  {
    "Element1": "Text",
    "Element2": "Text",
  },
 {
    "Element1": "Text",
    "Element2": "Text",
  },

....
]

If anyone would be kind to link me to some useful documentation that i can read through. I can't seem to find anything that is helpful for me now.

I'm not sure how to iterate through my JSONarray to access the objects and display my JSON data. If there are 1000 objects, i will iterate through each object and display their datas in a row.

I also don't know how to make it work with Data tables...

回答1:

you are getting json array where each json object with some specific key (Element1 and Element2). You just need to map those keys with respective columns in datatable. and then pass the list to datatable for rendering.

See below code

$(function () {
        var list = <% (String) request.getAttribute("listS");%>;
        //convert string to json object
        var listJson = JSON.parse(list);
       var table = $("#sp").DataTable({
    "scrollY": 500,
            "scrollX": true,
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "columns": [ // map the columns here
             { "data": "Element1" },
             { "data": "Element2" }
             ]
        });

        //render list here
        table.clear();
        table.rows.add(listJson); // make sure that list should be json object and not text
        table.draw();
      });

来源：https://stackoverflow.com/questions/60035490/using-jquery-ajax-on-jsp-to-display-on-datatables

标签

java

jquery

ajax

jsp

datatables