时间戳

首页 > 解决方案 > 在 JSP 上使用 Jquery Ajax 在 Datatables 上显示

java - 在 JSP 上使用 Jquery Ajax 在 Datatables 上显示

问题描述

这是我第一次使用 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);

索引.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 个对象，我将遍历每个对象并连续显示它们的数据。

我也不知道如何使它与数据表一起工作......

标签： javajqueryajaxjspdatatables

解决方案

您将获得 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();
      });

推荐阅读