th: каждый элемент данных не работает в Bootstrap 4 - PullRequest
Новая
       10

th: каждый элемент данных не работает в Bootstrap 4

0 голосов
/ 25 апреля 2020

Я использую bootstrap4 DataTable. Я использую весеннюю загрузку. Я передал свои данные от моего контроллера, как показано ниже. 

List<User>  list = new ArrayList<>();

@GetMapping(value = "/staff-details")
public String staffDetails(Model model) {       
      model.addAttribute("staffList",list );    
    return "staff-details";
}

Он работает нормально, когда, как показано ниже, это означает, что нет l oop

 <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>           
    </tbody>

Когда я хочу динамически заполнять данные из базы данных, они не работают .. Я использую, как показано ниже .. 

  <!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script src="   https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.min.css">

    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#example').DataTable({
                fixedHeader: true
            });
        });
    </script>
</head>
<body>

    <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>        

            <tr th:each="user: ${staffList}">  
                <td th:text="${user.firstName +' '+ user.lastName}"></td>
                <td th:text="${user.email}"></td>
                <td th:text="${user.restaurantId}"></td>
                <td th:text="${user.restaurantBranchId}"></td>
                <td th:text="${user.userRole}"></td>

            </tr> 

        </tbody>

    </table>

</body>

Пожалуйста, помогите мне, почему он не работает в l oop. .

...