Question

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

Answer 1

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

解决方案1： 您的表格中可能还有其他不受欢迎的divs。 Bootstrap3可排序表在结构方面很挑剔。请勿在{{1}}值之下或之上放置任何divs。做这样的事情：

tr

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

模板：

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

片段（正确）：

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

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

1 个答案: