0

我有一个超过 1 个选项卡的数据表。我想将帖子表中的数据显示到数据表中，但在我的帖子表中，我有 LanguageID 列。所以，我想用 LanguageID 分隔数据，这就是我使用 tab 的原因。但是，当我想获取 LanguageID 时遇到了问题。

这是我的观点。抱歉，我无法发布代码并使用 Image，因为我的代码中有 @foreach。

这是我的ajax

$(function() {
  var id = 1;
  var oTable = $("#data-post" + id).DataTable({
    processing: true,
    serverSide: true,
    ajax: {
      url: "{{ url("
      post ") }}",
      data: function(d) {
        d.LanguageID = id;
      }
    },
    columns: [{
        data: 'PostDate',
        name: 'PostDate'
      },
      {
        data: 'PostTitle',
        name: 'PostTitle'
      },
      {
        data: 'PostSlug',
        name: 'PostTitle'
      },
      {
        data: 'action',
        name: 'action'
      }
    ]
  });

  $('#tabPost' + id).on('click', function(e) {
    oTable.draw();
    e.preventDefault();
  });

});

我想将 html 中的 {{$language->id}} 解析到我的 ajax 中。但我不知道如何在不使用函数 onclick 的情况下做到这一点

4

2 回答 2

0

将 language_id 添加到您的 DataTable，但使其不可见。最好把它放在第一列。（稍后如果您需要添加列，则无需修改脚本）

然后，当您单击选项卡时，使用以下脚本根据不可见的 language_id 列过滤 DataTable；

标签：

@foreach($languages as $language)                 
    <li>
        <a href="#lang-{{ $language->id }}" class="language-tab" data-language-id="{{ $language->id }}" data-toggle="tab">{{ $language->title }}</a>
    </li>
@endforeach

脚本（我假设您在第二列中有不可见的语言列）

$('a.language-tab').click(function () {        
    table.api().columns(1).search($(this).attr('data-language-id'), false, false, true).draw();
});

您还可以拥有一个All显示所有语言的所有帖子的标签。

标签

<li>
    <a href="#lang-all" class="language-tab" data-language-id="all" data-toggle="tab">All Languages</a>
</li>
@foreach($languages as $language)                 
    <li>
        <a href="#lang-{{ $language->id }}" class="language-tab" data-language-id="{{ $language->id }}" data-toggle="tab">{{ $language->title }}</a>
    </li>
@endforeach

脚本：

$('a.language-tab').click(function () {        
    if ($(this).attr('data-language-id') == 'all')
        table.api().columns(1).search('', false, false, true).draw();
    else                               
        table.api().columns(1).search($(this).attr('data-status-id'), false, false, true).draw();
});

您还可以在第一个 ajax 请求时过滤 DataTable（类似于默认过滤）。

'data' => "function (data) {                                                     
    data.columns[1].search.value = '{{ $language->id }}'
}
于 2017-09-28T06:56:39.103 回答
0

为什么我无法获得 id 的问题，那是因为我只获得第一个 id .. 所以，我决定使用 each 来获取所有 id

$('.tabPost').each(function(){
var lang_id = $(this).attr('id');
var oTable = $("#data-post" + lang_id).DataTable({
  processing: true,
  serverSide: true,
  ajax:{
    url: "{{ url("post") }}",
    data: function(d) {
      d.LanguageID = lang_id
    }
  },
  columns: [
      { data: 'PostDate', name: 'PostDate'},
      { data: 'PostTitle', name: 'PostTitle' },
      { data: 'PostSlug', name: 'PostTitle' },
      { data: 'action', name: 'action'}
  ]
});

$('#'+lang_id).on('click', function(e){
  oTable.draw();
  e.preventDefault();
});

});

于 2017-09-28T07:48:22.607 回答