Question

我正在编写一个webapp，其中有一个使用Ajax生成的表。这些数据实际上是从数据库中提取的。在这里，我想使用jquery datatable插件。

的index.jsp

        throw new Exception(val[1]);

tableGenerator.js

<html>
<head>
</head>
<body>
    <marquee>
        <h1>This is an example of ajax</h1>
    </marquee>
    <form name="vinform">
        Enter id:<input type="button" id="somebutton" value="Click Me">
    </form>
    <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Case Number</th>
            <th>Case Owner</th>
            <th>Status</th>
            <th>Issue</th>
            <th>Reason</th>
            <th>Date/Time Opened</th>
            <th>Age</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Case Number</th>
            <th>Case Owner</th>
            <th>Status</th>
            <th>Issue</th>
            <th>Reason</th>
            <th>Date/Time Opened</th>
            <th>Age</th>
        </tr>
    </tfoot>
    </table>
    <span id="somediv"> </span>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="tableGenerator.js"></script>
</body>
</html>

UserBean.java

    $('#somebutton').click(function() {
    $(document).ready(function() {
        $('#example').DataTable({
            "ajax" : "Controller",
            "columns" : [ {
                "data" : "userBean.caseNumber"
            }, {
                "data" : "userBean.caseOwner"
            }, {
                "data" : "userBean.status"
            }, {
                "data" : "userBean.issue"
            }, {
                "data" : "userBean.reason"
            }, {
                "data" : "userBean.age"
            } ]
        });
    });
});

Controller.java（Servlet的）

package org.bean;

public class UserBean {
    private int age;
    private String caseOwner, status, issue, reason, dateOpened, caseNumber, resolution, finalStatus, startDate,
            endDate;
    private Double totalTimeTaken;

    public String getStartDate() {
        return startDate;
    }

    public void setStartDate(String startDate) {
        this.startDate = startDate;
    }

    public String getEndDate() {
        return endDate;
    }

    public void setEndDate(String endDate) {
        this.endDate = endDate;
    }

    public String getCaseNumber() {
        return caseNumber;
    }

    public void setCaseNumber(String caseNumber) {
        this.caseNumber = caseNumber;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getCaseOwner() {
        return caseOwner;
    }

    public void setCaseOwner(String caseOwner) {
        this.caseOwner = caseOwner;
    }

    public String getStatus() {
        return status;
    }

    public String getReason() {
        return reason;
    }

    public void setReason(String reason) {
        this.reason = reason;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public String getIssue() {
        return issue;
    }

    public void setIssue(String issue) {
        this.issue = issue;
    }

    public String getDateOpened() {
        return dateOpened;
    }

    public void setDateOpened(String dateOpened) {
        this.dateOpened = dateOpened;
    }

    public String getResolution() {
        return resolution;
    }

    public void setResolution(String resolution) {
        this.resolution = resolution;
    }

    public String getFinalStatus() {
        return finalStatus;
    }

    public void setFinalStatus(String finalStatus) {
        this.finalStatus = finalStatus;
    }

    public double getTotalTimeTaken() {
        return totalTimeTaken;
    }

    public void setTotalTimeTaken(Double totalTimeTaken) {
        this.totalTimeTaken = totalTimeTaken;
    }

    public UserBean() {

    }

    public UserBean(String caseNumber, String caseOwner, String issue, int age, String reason, String dateOpened,
            String status, String finalStatus, String resolution, String startDate, String endDate,
            Double totalTimeTaken) {
        this.caseNumber = caseNumber;
        this.caseOwner = caseOwner;
        this.issue = issue;
        this.reason = reason;
        this.age = age;
        this.dateOpened = dateOpened;
        this.status = status;
        this.resolution = resolution;
        this.finalStatus = finalStatus;
        this.startDate = startDate;
        this.endDate = endDate;
        this.totalTimeTaken = totalTimeTaken;
    }
}

DBUtility.java

import java.io.IOException;
import java.util.ArrayList;

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 org.bean.UserBean;

import com.dao.DataDao;
import com.google.gson.Gson;

@WebServlet("/Controller")
public class Controller extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            // String id = request.getParameter("val");

            DataDao dataDao = new DataDao();
            ArrayList<UserBean> list = dataDao.getFrameWork();
            String searchList = new Gson().toJson(list);
            response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(searchList);
        } catch (Exception e) {
            System.err.println(e.getMessage());
        }
    }
}

DataDao.java

package com.dao;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBUtility {
    private static Connection connection = null;

    public static Connection getConnection() throws Exception {
        if (connection != null)
            return connection;
        else {
            // Store the database URL in a string
            String userName = "sa";
            String password = "T!ger123";
            String url = "jdbc:sqlserver:XXXXXX;DatabaseName=TEST";

            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");

            // set the url, username and password for the databse
            connection = DriverManager.getConnection(url, userName, password);
            return connection;
        }
    }
}

当我点击按钮，而不是显示表数据时，除了在我的索引文件中创建的Basic html骨架外，它没有显示任何内容。

而不是使用

package com.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import org.bean.UserBean;

public class DataDao {
    private Connection connection;

    public DataDao() throws Exception {
        connection = DBUtility.getConnection();
    }

    public ArrayList<UserBean> getFrameWork() throws SQLException {
        ArrayList<UserBean> list = new ArrayList<UserBean>();
        PreparedStatement ps = null;
        try {

            ps = connection.prepareStatement("select * from statusTable");
            // ps.setString(1, frameWork);
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                UserBean userBean = new UserBean();
                userBean.setCaseNumber(rs.getString(1));
                userBean.setCaseOwner(rs.getString(2));
                userBean.setStatus(rs.getString(3));
                userBean.setIssue(rs.getString(4));
                userBean.setReason(rs.getString(5));
                userBean.setDateOpened(rs.getString(6));
                userBean.setAge(rs.getInt(7));
                list.add(userBean);
            }
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
        return list;
    }
}

当我使用

时

$('#somebutton').click(function() {
    $(document).ready(function() {
        $('#example').DataTable({
            "ajax" : "Controller",
            "columns" : [ {
                "data" : "userBean.caseNumber"
            }, {
                "data" : "userBean.caseOwner"
            }, {
                "data" : "userBean.status"
            }, {
                "data" : "userBean.issue"
            }, {
                "data" : "userBean.reason"
            }, {
                "data" : "userBean.age"
            } ]
        });
    });
});

正在显示正常的html表。

请告诉我如何显示此数据。

由于

单击按钮显示数据表

0 个答案: