TH в Semantic Datatable внутри вкладки ширина не установлена - PullRequest
Новая
       9

TH в Semantic Datatable внутри вкладки ширина не установлена

0 голосов
/ 04 декабря 2018

Как сделать тег шириной до 100% в семантическом CSS с таблицей данных внутри вкладки.В настоящее время у меня есть 3 вкладки с 1 датой каждый, ширина задается только для Tab1, но не для Tab2 и Tab3

Вот мой код: 1. HTML 

<div class="ui top attached tabular menu">
  <a data-toggle="tab" class="item active" data-tab="first">Other Hardwares Relation</a>
  <a data-toggle="tab" class="item" data-tab="second">Software and License Relation</a>
  <a data-toggle="tab" class="item" data-tab="third">Document Relation</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
  <table class="ui celled table display nowrap" style="width:100%" datatable>
  ...
  </table>
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  <table class="ui celled table display nowrap" style="width:100%" datatable>
    <thead>
      <tr>
        <th>No.</th>
        <th>Software #</th>
        ...
      </tr>
    </thead>
    <tbody>
      @foreach ($softwares as $index=>$software)
      <tr>
        <td>{{ $index+1 }}</td>
        <td>{{$software->code}}</td>
        ...
      </tr>
      @endforeach
    </tbody>
  </table>
</div>
<div class="ui bottom attached tab segment" data-tab="third">
  <table class="ui celled table display nowrap" style="width:100%" datatable>
  ...
  </table>
</div>
</div>

и 2. JS 

<script>
$(document).ready(function() {
    $('[datatable]').DataTable({
        "scrollX": true,
        "paging": false,
        "searching": false,
        dom: 'Bfrtip',
        buttons: [ ... ]
    });
    $('.menu .item').tab();

});
</script>

enter image description here

1 Ответ

0 голосов
/ 13 января 2019

Лучшая практика в Datatables - вместо того, чтобы приводить ваши данные с foreach, вы должны попробовать datatables, встроенные в ajax.Я столкнулся с той же проблемой и решил ее, превратив свою форму данных в json с помощью ajax-вызова.

PHP JSON Encode; 

$object = (object) $arr;
echo json_encode($object);

Форма Datatables Ajax; 

var table = $('#example').DataTable({
                fixedHeader: true,
                "initComplete": function(){
                    $('.ui.loader').remove();
                   )
                },  
                ajax: {
                    url: 'api/yourhandler.php',
                    type: 'GET',
                    data: {
                        searchTerm:searchTerm,
                        'pane':paneno,
                        project: projectFilter
                    }, 
                }, 
                    order: [[ 0, "desc" ], [ 5, "asc" ]],   
                    columnDefs: [
                    { "searchable": true, "targets": [0,1,2,3,4,5] },
                    { "className": "align-center", "targets": [0,2,3,4,5,6,7,8,9] },
                    { "width": "1%", "targets": [2,3,4,5,6,7] },
                    { "width": "10%", "targets": [8] },
                    { "width": "25%", "targets": [1,9] }

                    ],
                    columns: [
                    { data: "columndata1" },
                    { data: "columndata2" },
                    { data: "columndata3" },
                    { data: "columndata4" }                         
                    ],
                    responsive: true,
                    paging:   true,
                    pageLength: 25      

                });

Если вы решите не создавать AJAX, я могу сказать, что причиной вашей проблемы являются ваши данныене подходит к столу.Попытайтесь сфокусировать свой foreach, вы увидите проблему.

...