Таблицы данных начальной загрузки некорректно работают с thymeleaf th:block

ProgramBox

Таблицы данных начальной загрузки некорректно работают с thymeleaf th:block

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#html #twitter-bootstrap #datatables #jquery-plugins #thymeleaf

#HTML #twitter-bootstrap #таблицы данных #jquery-плагины #thymeleaf

Вопрос:

Я получаю nTd is undefined при использовании TableData of bootstrap . Я уже читал на многих форумах, что это из-за отсутствия одинакового количества td ‘s и th ‘s в элементах заголовка и тела. Но я думаю, что это должно сработать. Я подсчитал количество td s и th s, и они совпадают. Вот мой код:

 <table id="searchResultTable">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                
            </thead>
            <tbody>
                <th:block th:each="element, iterStat  : ${searchResult}">

                    <tr>
                        
                        <td class="underline font-weight-bold" colspan="3"
                            data-toggle="collapse" th:data-target="|.demo${iterStat.count}|"
                            th:text="${element.key}" />
                            <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>

                    </tr>
                    <tr th:id="'demo'  ${iterStat.index}"
                        th:class="|accordian-body collapse demo${iterStat.count}|"
                        th:each="anews : ${element.value}">

                        

                        <td class="boldanditalic" th:text="${anews.getDate()}">Date</td>

                        <td class="boldanditalic" th:text="${anews.user.getFullname()}">
                            writer</td>

                        <td th:if="${!#strings.equals(anews.fp,'')}"
                            th:text="'$' ${anews.fp}">fp</td>
                        <td th:if="${!#strings.equals(anews.sep,'')}"
                            th:text="'$' ${anews.sep}">sep</td>
                        <td th:if="${!#strings.equals(anews.tp,'')}"
                            th:text="'$' ${anews.tp}">tp</td>
                        <td th:if="${!#strings.equals(anews.fop,'')}"
                            th:text="'$' ${anews.fop}">fop</td>
                        <td th:if="${!#strings.equals(anews.fp,'')}"
                            th:text="'$' ${anews.fp}">SP</td>
                        <td th:if="${!#strings.equals(anews.sip,'')}"
                            th:text="'$' ${anews.sip}">SP</td>
                        <td th:if="${!#strings.equals(anews.sp,'')}"
                            th:text="'$' ${anews.sp}">SP</td>

                    </tr>
                </th:block>
            </tbody>
        </table>

Я даже пытался добавить <th> блок в заголовок. Но это не сработало.
Я был бы признателен вам за помощь.

Обновление: я добавил следующий код в раздел заголовка:

 <script>
    $(document).ready(function() {
        $('#searchResultTable').dataTable();
    });
</script>

Здесь вы можете найти ссылки и сценарии в заголовке:

 <script
    src="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"></script>

<link
    href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"
    rel="stylesheet">


<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<link
    href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"
    rel="stylesheet">

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Вы можете найти скриншот результата здесь:

Обновление 2: Если я удалю th:block раздел и добавлю несколько простых элементов, это сработает.

1. Можете ли вы показать пример окончательного вывода HTML и указать, правильно ли вы включаете DataTable, поскольку это сторонний плагин.

2. @Robert Спасибо за ваш быстрый ответ. Я обновил свой вопрос.

3. Дважды проверьте правильность структуры вашей таблицы. Похоже, что вы используете <th> вне <tr> тела таблицы. Это может привести к тому, что количество столбцов приведет к ошибке. Количество столбцов должно быть одинаковым, а не количество строк. Поэтому, если у вас есть 4 заголовка (например: имя, возраст, DOB, Email), DataTables ожидает, что каждая строка данных будет содержать 4 столбца.

4. @Большое спасибо. Вы правы. Если я удалю раздел th: block и добавлю несколько простых элементов, это сработает. Но знаете ли вы, как это решить, сохранив th: блок? Если я добавлю <tr> вокруг <th:block>, я получу еще одну ошибку, касающуюся знания элемента.key.

5. Например, <td> <th> тег должен быть заключен в <tr>...</tr> для правильного отображения. Если у вас возникли проблемы с :block аспектами, которые вы описываете, это, вероятно, больше связано с тем, каким будет конечный результат вашего HTML.

Ответ №1:

Внутри <thead> строки у вас есть 9 ячеек, давайте предположим, что это то, что вы хотите;

Внутри <tbody> у вас есть 2 строки:

В первой строке 9 ячеек, но в первой ячейке есть colspan=3 , что даст вам всего 11 ячеек в соответствии с вашей <thead> строкой. Это должно быть исправлено либо в remove 2 empty cells, либо в remove colspan .
Вторая строка содержит 9 ячеек, но последние 7 ячеек являются условными, и у вас их может вообще не быть или быть некоторые из них. Чтобы поддерживать правильную структуру таблицы, вы должны удалить условие из ячеек и всегда иметь их.

В основном ваш код может выглядеть следующим образом … (Я могу что-то пропустить, поскольку я не пробовал этот код, но вы получите представление)

     <table id="searchResultTable">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            
        </thead>
        <tbody>
            <th:block th:each="element, iterStat  : ${searchResult}">

                <tr>
                    
                    <td class="underline font-weight-bold" colspan="3"
                        data-toggle="collapse" th:data-target="|.demo${iterStat.count}|"
                        th:text="${element.key}"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr th:id="'demo'  ${iterStat.index}"
                    th:class="|accordian-body collapse demo${iterStat.count}|"
                    th:each="anews : ${element.value}">                      

                    <td class="boldanditalic" th:text="${anews.getDate()}">Date</td>

                    <td class="boldanditalic" th:text="${anews.user.getFullname()}">
                        writer</td>

                    <td th:text="${!#strings.equals(anews.fp,'')}? ${'$'  anews.fp} : ''">fp</td>
                    <td th:text="${!#strings.equals(anews.sep,'')}? ${'$'  anews.sep} : ''">sep</td>
                    <td th:text="${!#strings.equals(anews.tp,'')}? ${'$'  anews.tp} : ''">tp</td>
                    <td th:text="${!#strings.equals(anews.fop,'')}? ${'$'  anews.fop} : ''">fop</td>
                    <td th:text="${!#strings.equals(anews.sp,'')}? ${'$'  anews.sp} : ''">sp</td>
                    <td th:text="${!#strings.equals(anews.sip,'')}? ${'$'  anews.sip} : ''">sip</td>
                    <td th:text="${!#strings.equals(anews.fp,'')}? ${'$'  anews.fp} : ''">fp</td>


                </tr>
            </th:block>
        </tbody>
    </table>

1. Большое спасибо. Предложенная вами логика сработала :). Ваш код не работал напрямую. Но я попробовал следующее, и это сработало: <td th: if=»${!#strings.equals(anews.s_p,»)}» th:text=»‘$’ ${anews.s_p}»> Что-то</td> <td th:если=»${!#strings.equals(anews.s_p,»)}»th:text=»»»>Что-то</td>

2. @user1419243 Я ожидал, что код может не выполняться, поскольку я ввел его непосредственно в SO. Но я рад, что у вас есть исправление. th:if и th:unless является излишним, и вам следует рассмотреть возможность использования условных выражений . С наилучшими пожеланиями,

3. Большое спасибо, я попробую :).