【问题标题】:How do I populate a DataTable by calling a servlet in如何通过调用 servlet 来填充 DataTable
【发布时间】:2017-10-30 14:22:22
【问题描述】:

我是 java servlet 和 dataTables 的新手,我很难让我的 java servlet 执行:

我正在使用带有 tomcat 8.0.27 和 DataTables 10.1.16 的 netbeans 8.2 IDE

我的 NetBeans 结构如下所示:

战争看起来像这样:
我的 index.jsp 看起来像这样:

DataTable 定义(在 html 头部)

 <script lang='javascript'>
            $(document).ready(function () {
                $('#memberList').dataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "${pageContext.request.contextPath}/SubSearch",
                    "type": "GET" 
                }

              });
              
           });
        </script>

Html Body:
 <body>
        <h1>Member TXN Display</h1>
        <div>
            (Enter Search Criteria)<br/>
            <form action="${pageContext.request.contextPath}/SubSearch" method="post"  >
               
                <input type="text" id="SearchCritiera" style="width:322px">
                <input type="submit" value="FIND">
                <table id="memberList">
                    <thead>
                        <tr>
                            <th>Member #</th>
                            <th>Last Name</th>
                            <th>First Name</th>
                            </tr>
                    </thead>
                </table>
            </form>
        </div>
    </body>
</html>

context.xml 看起来像这样:

<?xml version="1.0" encoding="UTF-8"?>
<Context path="/MemberTXN"/>

单击提交(查找)按钮会调用 servlet,但是,'ajax' 似乎根本没有命中。我在 servlet 中有断点,当我在“调试”模式下运行时,由于 document.ready 代码,我预计会遇到这些断点,但没有骰子。

Servlet 代码:

 package member;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.*;

/**
 *
 * @author Ainsworth
 */
 @WebServlet(name = "SubSearch", urlPatterns = {"/SubSearch"})
public class SubSearch extends HttpServlet {

/**
 * Processes requests for both HTTP <code>GET</code> and <code>POST</code>
 * methods.
 *
 * @param request servlet request
 * @param response servlet response
 * @throws ServletException if a servlet-specific error occurs
 * @throws IOException if an I/O error occurs
 */
protected void processRequest(HttpServletRequest request, HttpServletResponse 
 response)
        throws ServletException, IOException {


        JsonObject jMembers = new JsonObject();
        jMembers.addProperty("Echo","1");
        jMembers.addProperty("TotalRecords", 7);
        jMembers.addProperty("TotalDisplayRecords", 7);



        JsonArray data = new JsonArray();

        JsonArray row = new JsonArray();
        row.add("123456789");
        row.add("Trump");
        row.add("Donald");
        data.add(row);

        row = new JsonArray();
        row.add("123456799");
        row.add("Clinton");
        row.add("Hillary");
        data.add(row);

         row = new JsonArray();
        row.add("123456809");
        row.add("Shcumer");
        row.add("Chuck");
        data.add(row);

         row = new JsonArray();
        row.add("123456819");
        row.add("Warren");
        row.add("Elizabeth");
        data.add(row);

         row = new JsonArray();
        row.add("123456829");
        row.add("Sanders");
        row.add("Bernie");
        data.add(row);

         row = new JsonArray();
        row.add("123456839");
        row.add("DeVoss");
        row.add("Betsy");
        data.add(row);


        row = new JsonArray();
        row.add("123456849");
        row.add("Meyers");
        row.add("Seth");
        data.add(row);

        jMembers.add("Data", data);

        response.setContentType("application/Json");
        response.getWriter().print(jMembers.toString());




}


/**
 * Handles the HTTP <code>GET</code> method.
 *
 * @param request servlet request
 * @param response servlet response
 * @throws ServletException if a servlet-specific error occurs
 * @throws IOException if an I/O error occurs
 */
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse 
response)
        throws ServletException, IOException {
    processRequest(request, response);
}

/**
 * Handles the HTTP <code>POST</code> method.
 *
 * @param request servlet request
 * @param response servlet response
 * @throws ServletException if a servlet-specific error occurs
 * @throws IOException if an I/O error occurs
 */
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse  
response)
        throws ServletException, IOException {
    processRequest(request, response);
}

/**
 * Returns a short description of the servlet.
 *
 * @return a String containing servlet description
 */
@Override
public String getServletInfo() {
    return "Short description";
 }

 }

这是提交按钮的输出:

如果有人能指出我的方法的错误,我将非常感激

【问题讨论】:

  • 我已将 Servlet 代码添加到说明中。注意:最初我没有打扰代码有效的 Json。这当然是模拟数据,但正如您所见,当使用提交键调用 servlet 时,输出与预期的一样。

标签: java ajax jsp servlets datatables


【解决方案1】:

选项 1:

您可以使用ajax.dataFilter 选项来更改 JSON 结构,因为 API 默认需要这样的结构:

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [{...},{...}]
}

使用 dataFilter 改变 JSON 结构:

$('#memberList').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "${pageContext.request.contextPath}/SubSearch",
        "type": "GET",
        dataFilter: function(data){
         var json = jQuery.parseJSON( data );
         json.recordsTotal = json.TotalRecords;
         json.recordsFiltered = json.TotalDisplayRecords;
         json.data = json.Data;

         return JSON.stringify( json ); // return JSON string
        }
    }

选项 2:

如果您有机会更改服务器 API 数据结构,请使用如下适当的键构建 JSON。

jMembers.addProperty("echo","1"); //important case-sensitive
jMembers.addProperty("recordsTotal", 7);
jMembers.addProperty("recordsFiltered", 7);
jMembers.add("data", data);

另见:

【讨论】:

  • 谢谢,古尔坎。您的 cmets 可能确实很有用。但是,我目前还没有注意到您解决的问题。我的问题是 $(document)ready(function() ...) 中的代码没有被执行,因为我的断点没有被命中。提交表单时会触发断点。
  • 如果您键入 localhost:8080/MemberTXN/index.jsp 并且 datatable 没有填充您的服务器数据,那么您需要检查客户端库。第一个 jquery lib 和 datable.js 之后需要包含页面。
【解决方案2】:

引用 Firefox:嗯,这很尴尬:

我终于确定我的 Javascript 没有被执行。问题是我的&lt;script type="text/javascript" src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;&lt;/script&gt; 之前缺少&gt;

再次感谢 Gurkan,因为我正在执行我的服务器代码,您的帖子将帮助我确定我没有填满表格的原因。

【讨论】:

  • 很高兴听到您解决了问题。我实际上试图在我的最后一条评论中解释它。如果您将我的答案标记为已接受,我会很高兴。
【解决方案3】:

您应该在 doGet 或 doPost 中执行您的算法

【讨论】:

    猜你喜欢
    • 2015-01-08
    • 2020-07-05
    • 2012-08-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多