How to use DataTables to render server side data (not ajax)

How to use DataTables to render server side data (not ajax)

sunny_ssunny_s Posts: 31Questions: 2Answers: 0

Hi, I need help.

I am working on my very first web development project, there're a lot of data I need to organize and show nicely to user.
This is all the code for this page

<body>
    <%@ include file="header.jsp" %>
    <c:if test="${items.length() > 0}">
      <c:forEach var="i" begin="0" end="${items.length()-1}">
        <c:set var="item" value="${items.getJSONObject(i)}"/>
        ${item.optString("itemName")}<br />
        ${item}<br />
      </c:forEach>
    </c:if>
 </body>

what the page looks like right now:

I am not sure how should I start, I want to make a row grouping table like thie example https://datatables.net/examples/advanced_init/row_grouping.html

If anyone can point me direction that'll be great. Thank you very much for your time.

Replies

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    Instead of generating that json looking stuff, just use the data to generate the html table server side.

    Then you can apply the javascript as shown in your example

  • sunny_ssunny_s Posts: 31Questions: 2Answers: 0
    edited July 2018

    Update:

    I wrap the code inside table in my jsp file,

          <table class="table table-bordered table-hover" id="items-table">
            <thead class="green-thead">
              <tr>
                <th>Name</th>
                <th>Departments</th>
              </tr>
            </thead>
            <tbody>
              <c:if test="${items.length() > 0}">
                <c:forEach var="i" begin="0" end="${items.length()-1}">
                <c:set var="item" value="${items.getJSONObject(i)}"/>
                  <tr>
                    <td>
                      ${item.optString("itemName")}
                      <%-- ${item} --%>
                    </td>
                    <td>
                      ${item.optString("departmentName")}
                      <%-- ${item} --%>
                    </td>
                  <tr>
                </c:forEach>
              </c:if>
            </tbody>
          </table>
    

    and the page looks like this now:

    But I can't sort nor search, the following error appears in the console

    What should I do in order to utilize dataTable for this page?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    Cannot set property '_DT_CellIndex' of undefined

    This error occurs when the HTML table doesn't correspond to what Datatables is looking for. Based on the above it looks like it should be ok. What we really need to see is the HTML generated by your code. Maybe you can look at the page source to see what is generated.

    Also make sure your Datatables init code does not reference any column numbers higher than 1. With two columns you have column numbers 0 and 1.

    If this doesn't help then we would need to see your page or an example with the issue to be able to debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • sunny_ssunny_s Posts: 31Questions: 2Answers: 0

    UPDATE:

    I modified the jsp, re-arrange the code with table and now I have a nicely layout table

           <table class="table table-bordered table-hover" id="items-table">
            <thead class="green-thead">
              <tr>
                <th>Item Names</th>
                <th>Departments</th>
              </tr>
            </thead>
            <tbody>
              <c:if test="${items.length() > 0}">
                <c:forEach var="i" begin="0" end="${items.length()-1}">
                <c:set var="item" value="${items.getJSONObject(i)}"/>
                  <tr>
                    <td>${item.optString("itemName")}</td>
                    <td>Department: ${item.optString("departmentName")}</td>
                  </tr>
                </c:forEach>
              </c:if>
            </tbody>
          </table>
    

    My page looks fine now, there's no error in the console:

This discussion has been closed.