在JSP上使用Jquery Ajax在数据表上显示 [英] Using Jquery Ajax on JSP to display on Datatables

问题描述

这是我第一次使用Jquery Ajax.

This is my first time using Jquery Ajax.

上下文是，我试图在Datatable上显示10000行以上的数据，我以前所做的只是使用servlet将数据的Arraylist转发到JSP，然后遍历并显示数据到显示数据上.

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.

加载数据表花了太多时间.所以我决定我想尝试使用Jquery Ajax来看看是否有帮助.

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?

我正在使用GSON序列化我的arraylist.

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>

我的JSONarray的结构如下，这是输出

[
  {
    "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.

我不确定如何遍历JSONarray来访问对象并显示JSON数据. 如果有1000个对象，我将遍历每个对象并连续显示其数据.

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

推荐答案

，您将获得json数组，其中每个json对象都有一些特定的键(Element1和Element2).您只需要将这些键与数据表中的相应列进行映射.然后将列表传递到数据表进行渲染.

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.

请参见下面的代码

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

这篇关于在JSP上使用Jquery Ajax在数据表上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！