在客户端对表格进行排序时出现 Ajax 问题答案

【问题标题】：Ajax Issue while sorting the Table at client side在客户端对表格进行排序时出现 Ajax 问题
【发布时间】：2017-04-03 19:56:51
【问题描述】：

我在 Spring Boot 应用程序中使用 Ajax 调用，无法对列进行表排序，无论如何在 Ajax 中进行客户端排序？

【问题讨论】：

请将相关的客户端代码添加到您的问题中。
front-end使用什么类型的服务器端java模板技术，tables使用什么类型的javascript库?

标签： ajax spring-boot

【解决方案1】：

由于您没有包含任何客户端代码，我只做一些假设：

解决方案 1： 您的表中可能还有其他不需要的 divs。 Bootstrap3 可排序表在结构方面很挑剔。不要将任何divs 放在tr 值的下方或上方。做这样的事情：

<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>

解决方案 2：如果您使用 Thymeleaf 作为模板引擎，那么您将脚本包含在片段之外的可能性很小。

模板：

<!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>

片段（正确）：

<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>

片段（不正确）：

<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>

【讨论】：