Using Jquery Ajax on JSP to display on Datatables

Question

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...

The key is to realize, where and when which code is executed - JSP on the server, when the page is requested and rendered (i.e. before the response is sent to the browser), and Javascript in the browser, after the browser receives the already generated response. This means you cannot mix JSP and JavaScript variables ("ajax" : list line is invalid). See e.g. stackoverflow.com/questions/44678192/… for hint. — Jozef Chocholacek
– Jozef Chocholacek, Commented Feb 3, 2020 at 8:44
Hi Jozef, thanks for this, i think i sort of get what you mean. I think theres quite alot of things i dont get. So if i'm loading too much data onto data tables. So say if i have 10 pages, when i load the table first, will AJAX load up the first page only? If not how do i make them do it.. — jffryteo
– jffryteo, Commented Feb 3, 2020 at 9:31

Bhushan Kawadkar · Accepted Answer · 2020-02-03 08:49:22Z

0

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

edited Feb 3, 2020 at 8:49

answered Feb 3, 2020 at 8:35

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

jffryteo Over a year ago

Hi Bhushan, appreciate the quick response, just wanna check real quick if String json = gson.toJson(listS); is a JSON object. Also i don't need these: "processing": true, "serverSide": true, "ajax" : list

jffryteo Over a year ago

Also, i dont think java has "var", how do i overcome this

Bhushan Kawadkar Over a year ago

you are reading json through request object but also casting it to String hence here we need to parse it to JSON again. We don't need processing, serverside and ajax here as you are already getting list from request object instead of making any extra API call

Bhushan Kawadkar Over a year ago

var is from javascript and not for JAVA as your datatable script is outside of scriptlets

jffryteo Over a year ago

okay so i will need to reparse it into a JSON object. Is there anyway for me to parse the json object from servlet to JSP without casting it to string? @2nd comment. Got it, i was looking through articles and didn't realise that i can actually use var inside the scripts...

|

Collectives™ on Stack Overflow

Using Jquery Ajax on JSP to display on Datatables

1 Answer 1

19 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Linked

Related