Yajra 如何在不使用 onclick 的情况下将 ID 从 html 解析为 ajax

Question

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

这是我的观点。抱歉，我不能post代码和使用图像，因为我的代码中有@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();
  });

});

我想将 {{$language->id}} 从 html 解析到我的 ajax.. 但我不知道如何不使用函数 onclick

Answer 1

将 language_id 添加到您的数据表，但使其不可见。最好将其放在第一列中。（以后如果需要添加列，就不需要修改脚本了）

然后当您单击选项卡时，使用以下脚本根据不可见的 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();
});

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

'data' => "function (data) {                                                     
    data.columns[1].search.value = '{{ $language->id }}'
}

Answer 2

问题为什么我取不到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();
});

});

Yajra 如何在不使用 onclick 的情况下将 ID 从 html 解析为 ajax

Yajra How to parsing ID from html to ajax without using onclick

php

ajax

jquery

laravel

yajra-datatable