#html #bootstrap-4
Вопрос:
Я не знаю почему,но поиск и кнопки, такие как pdf, печать, не отображаются, даже если все в порядке.
Это моя текущая таблица:
Это и есть код:
lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;1.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt;lt;/formgt; lt;a type="submit" class="btn btn-danger btn-xs"gt;Removelt;/agt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; Я удаляю часть кода здесь, потому что он слишком длинный
Это то, чего я хочу достичь:
Это моя функция скрипта для обработки данных:
$(function () { $("#example1").DataTable({ "responsive": true, "lengthChange": false, "autoWidth": false, "buttons": ["excel", "pdf", "print"] }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)'); }); Примечание: Я заметил, что диапазон строк делает таблицу неправильной, но мне действительно нужен этот диапазон строк.
Комментарии:
1. Привет, Шахир, в вашем коде есть неожиданный тег lt;/formgt;, Также удалите кнопку div из таблицы и переместитесь в верхнюю часть таблицы.
2. Я думаю, вам не хватает библиотеки таблиц данных
Ответ №1:
Я сделал вам очень простую версию, но я думаю, что это то, к чему вы стремитесь. Посмотрите на HTML, который я добавил, и CSS. Я предположил, что таких столов было гораздо больше. Я добавил строку поиска и несколько потенциальных кнопок для ссылки на excel, pdf или печать.
.container { width: 100%; height: 100%; background-color: lightblue; border: solid; overflow: visible; } .d-flex { display: flex; flex-direction: column; } .nav-comp { list-style-type: none; display: flex; } li { background-color: lightgrey; border: solid; list-style-type: none; width: 100px; text-align: center; font-weight: bold; cursor: pointer; padding: 5px; margin-right: 10px; } input[type=search] { position: absolute; top: 2px; right: 5px; width: 30%; text-align: right; border: solid lightgrey; border-radius: 10px; } table#example1 { border-bottom: black solid; margin-bottom: 1rem; } lt;headgt; lt;link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"gt; lt;/headgt; lt;navgt; lt;ul class="nav-comp"gt; lt;ligt;Excellt;/ligt; lt;ligt;PDFlt;/ligt; lt;ligt;Printlt;/ligt; lt;/ulgt; lt;/navgt; lt;div class="search-bar"gt; lt;input type="search" placeholder="Search"gt; lt;/divgt; lt;div class="container"gt; lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;1.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt; lt;button type="submit" class="btn btn-danger btn-xs"gt;Removelt;/buttongt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;2.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt; lt;button type="submit" class="btn btn-danger btn-xs"gt;Removelt;/buttongt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;3.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt; lt;button type="submit" class="btn btn-danger btn-xs"gt;Removelt;/buttongt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;4.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt; lt;button type="submit" class="btn btn-danger btn-xs"gt;Removelt;/buttongt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;5.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt; lt;button type="submit" class="btn btn-danger btn-xs"gt;Removelt;/buttongt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;6.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt; lt;button type="submit" class="btn btn-danger btn-xs"gt;Removelt;/buttongt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;7.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt; lt;button type="submit" class="btn btn-danger btn-xs"gt;Removelt;/buttongt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; lt;table id="example1" class="table table-bordered table-striped dataTable no-footer"gt; lt;theadgt; lt;trgt; lt;thgt;No.lt;/thgt; lt;thgt;Trimesterlt;/thgt; lt;thgt;Rolelt;/thgt; lt;thgt;Beforelt;/thgt; lt;thgt;Due Datelt;/thgt; lt;thgt;Afterlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td rowspan="4" class="bg-white"gt;8.lt;/tdgt; lt;td rowspan="4" class="bg-white"gt;[2110] Trimester 1 - 2021/2022lt;/tdgt; lt;tdgt;Coordinatorlt;/tdgt; lt;tdgt;10/12/2021lt;/tdgt; lt;tdgt;12/12/2021lt;/tdgt; lt;tdgt;13/12/2021lt;/tdgt; lt;tdgt; lt;div class="d-flex"gt; lt;button type="submit" class="btn btn-warning btn-xs mr-1"gt;Editlt;/buttongt; lt;button type="submit" class="btn btn-danger btn-xs"gt;Removelt;/buttongt; lt;/divgt; lt;/tdgt; lt;/tbodygt; lt;/tablegt; lt;/divgt; Ответ №2:
Вы можете попробовать этот код для поиска…
lt;table id="Example" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%"gt;
Надеюсь, это вам поможет..