java - 在JSP上使用Jquery Ajax在数据表上显示

Question

这是我第一次使用 Jquery Ajax。

上下文是，我试图在 Datatable 上显示超过 10000 行的数据，我之前所做的只是使用我的 servlet 将我的数据 Arraylist 转发到 JSP，然后循环并将数据显示到显示数据上。

加载数据表花费了太多时间。所以我决定尝试使用 Jquery Ajax 来看看这是否有助于解决问题。

我目前在实现它时遇到一些问题，有人可以帮助我吗？

我正在使用 GSON 序列化我的数组列表。

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",
  },

....
]

如果有人愿意将我链接到一些我可以阅读的有用文档。我现在似乎找不到任何对我有帮助的东西。

我不确定如何迭代 JSONarray 来访问对象并显示 JSON 数据。如果有 1000 个对象，我将迭代每个对象并在一行中显示它们的数据。

我也不知道如何使其与数据表一起使用...

Answer 1

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

见下面的代码

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