AdminLTE Datatables не применяет стиль к метке - PullRequest
Новая
       14

AdminLTE Datatables не применяет стиль к метке

0 голосов
/ 08 ноября 2018

Итак, я пытаюсь создать таблицу данных с использованием шаблона adminlte: 

var tblCardHistory;
tblCardHistory = $("#cardhistorynew-table").DataTable({
    "deferRender": true,
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    columns: [
        { data: "emp_id" },
        { data: "name" },
        { data: "card_no" },
        { data: "change_time" },
        { data: "change_date" }
    ]
});
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="box-body">
    <div id="cardhistorynew-table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
        <div class="row">
            <div class="col-sm-12">
                <table id="cardhistorynew-table" class="table table-bordered table-striped table-hover data-table" role="grid" aria-describedby="cardhistorynew-table_info">
                    <thead>
                        <tr role="row">
                            <th class="sorting_asc" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Employee Id</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Name</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Card Number</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Creation Time</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Creation Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- rows -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Это применяет стиль правильно и все. Затем я пытаюсь реализовать поиск, пейджинг и т. Д.

Это применило бы стиль правильно, за исключением метки search и show..entries:

enter image description here

Извините, если я упускаю что-то очень очевидное здесь. Нужна помощь; м;

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

используйте bootstrap.min.css в стиле.искать фрагмент кода. 

var tblCardHistory;
tblCardHistory = $("#cardhistorynew-table").DataTable({
    "deferRender": true,
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    columns: [
        { data: "emp_id" },
        { data: "name" },
        { data: "card_no" },
        { data: "change_time" },
        { data: "change_date" }
    ]
});
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="box-body">
    <div id="cardhistorynew-table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
        <div class="row">
            <div class="col-sm-12">
                <table id="cardhistorynew-table" class="table table-bordered table-striped table-hover data-table" role="grid" aria-describedby="cardhistorynew-table_info">
                    <thead>
                        <tr role="row">
                            <th class="sorting_asc" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Employee Id</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Name</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Card Number</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Creation Time</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Creation Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- rows -->
                       <tr>
    <th scope="row">1</th>
    <td>Mark 1</td>
    <td>Otto</td>
    <td>@mdo</td>
    <td>@twitter 3</td>
</tr>
<tr>
    <th scope="row">2</th>
    <td>Mark 10</td>
    <td>Otto</td>
    <td>@mdo</td>
    <td>@twitter 3</td>
</tr>
<tr>
    <th scope="row">3</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
    <td>@twitter 4</td>
</tr>
<tr>
    <th scope="row">4</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
    <td>@twitter 5</td>
</tr>
<tr>
    <th scope="row">5</th>
    <td>Mark 5</td>
    <td>Otto 5</td>
    <td>@mdo 5</td>
    <td>@twitter 5</td>
</tr>
<tr>
    <th scope="row">6</th>
    <td>Mark 6</td>
    <td>Otto 6</td>
    <td>@mdo 6</td>
    <td>@twitter 6</td>
</tr>
<tr>
    <th scope="row">7</th>
    <td>Mark 7</td>
    <td>Otto 7</td>
    <td>@mdo 7</td>
    <td>@twitter 7</td>
</tr>
<tr>
    <th scope="row">8</th>
    <td>Mark 8</td>
    <td>Otto 8</td>
    <td>skb 8</td>
    <td>@twitter 8</td>
</tr>
<tr>
    <th scope="row">9</th>
    <td>Mark 9</td>
    <td>Otto 9</td>
    <td>@mdo 9</td>
    <td>@twitter 9</td>
</tr>
<tr>
    <th scope="row">10</th>
    <td>Mark 10</td>
    <td>Otto 10</td>
    <td>@mdo 10</td>
    <td>@twitter 10</td>
</tr>
<tr>
    <th scope="row">11</th>
    <td>Mark 11</td>
    <td>Otto 11</td>
    <td>@mdo 11</td>
    <td>@twitter 11</td>
</tr>
<tr>
    <th scope="row">12</th>
    <td>Mark 9</td>
    <td>Otto 12</td>
    <td>@mdo 12</td>
    <td>@twitter 12</td>
</tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
0 голосов
/ 08 ноября 2018

Вам нужно добавить что-то вроде следующего в ваш HTML ... (сразу после dataTables_wrapper DIV) 

<div class="row">
  <div class="col-sm-6">
    <div class="dataTables_length" id="example1_length">
       <label>Show 
          <select name="example1_length" class="form-control input-sm" aria-controls="example1">
             <option value="10">10</option>
             <option value="25">25</option>
             <option value="50">50</option>
             <option value="100">100</option>
          </select> entries</label>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="dataTables_filter" id="example1_filter">
       <label>Search:<input class="form-control input-sm" aria-controls="example1" type="search" placeholder=""></label>
    </div>
  </div>
</div>

Надеюсь, это поможет?

...