1

I am using Ajax call in Spring Boot App, Not able to do Table sorting for the columns, Anyway of doing client side sorting in Ajax ?

DevU
  • 11
  • 1
  • 3
    Please add the relevant client-side code to your question. – ventiseis Apr 03 '17 at 20:30
  • What type of server side java template technology do you use for **[front-end](https://dzone.com/articles/template-engines-at-one-spring-boot-and-engines-se)** and what type of javascript library do you use for **[tables](https://codegeekz.com/best-javascript-data-grid-libraries/)**? – bora.oren Apr 04 '17 at 06:49

1 Answers1

0

Since you didn't include any client-side code I'll just make a few assumptions:

Solution 1: You may have additional unwanted divs in your table. The Bootstrap3 sortable table is picky when it comes to structure. Don't put any divs beneath or above the tr values. Do something like this:

<table id="example" class="table table-striped table-bordered table-hover" style="max-width: 85% !important;">
   <thead>
      <tr>
         <th><b>Requested By</b></th>
         <th><b>Request Type</b></th>
         <th><b>Reason</b></th>
         <th><b>Requested Date</b></th>
         <th><b>Status</b></th>
      </tr>
   </thead>
   <tbody>
      <tr th:each="request : ${requests}" th:if="${request.get('requestStatus') == 'Pending'}">
         <td th:text="${request.get('author').get('username')}" class="initial-name">Employee Initials</td>
         <td th:text="${request.get('requestType')}">Request Type</td>
         <td th:text="${request.get('requestText')}">Reason</td>
         <td th:text="${request.get('dateRequested')}">Requested Date</td>
         <td th:switch="${request.get('requestStatus')}">
            <th:block th:case="Pending" th:text="${request.get('requestStatus')}"><span class="nnit">Pending</span></th:block>
            <th:block th:case="Approved" th:text="${request.get('requestStatus')}"><span class="green">Approved</span></th:block>
            <th:block th:case="Rejected" th:text="${request.get('requestStatus')}"><span class="nnit">Rejected</span></th:block>
         </td>
      </tr>
   </tbody>
</table>

Solution 2: There's a small chance you included your scripts outside of your fragment if you're using Thymeleaf as a templating engine.

Template: 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.thymeleaf.org ">
<head lang="en">
    <title>Sample Springboot Application</title>

    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>

    <!-- Internal Stylesheet -->
    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" media="screen"/>

    <!--Font Awesome-->
    <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"/>

</head>
<body>

<div class="container" style="width: 100% !important;">

    <div th:replace="fragments/header :: header"></div>

    <div th:replace="fragments/table:: table"></div>

    <div th:replace="fragments/footer :: footer"></div>

</div>

</body>
</html>

Fragment (Correct):

<div th:fragment="table" xmlns:th="http://www.w3.org/1999/xhtml">

    <!-- Get table code from this link and paste here: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
          $('#example').DataTable();
        });
    </script>

    <!-- Include all scripts before closing fragment div -->
</div>

Fragment (Incorrect):

<div th:fragment="table" xmlns:th="http://www.w3.org/1999/xhtml">

    <!-- Get table code from this link and paste here: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns -->

    <!-- Whoops! You included your scripts (below) after your fragment's closing div! -->
</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
          $('#example').DataTable();
        });
    </script>
Martin Erlic
  • 5,467
  • 22
  • 81
  • 153