Yajra onclickを使わずにhtmlからajaxにIDをパースする方法

Question

私は1つ以上のタブを持つデータテーブルを持っています。私はポストのテーブルからデータテーブルにデータを表示したいのですが、私のポストテーブルには私はLanguageIDカラムがあります。ですから、私はLanguageIDでデータを分離したいので、私はタブを使用しています。しかし、私は言語IDを取得したいときに問題が発生します。

私のコードに@foreachがあるので、申し訳ありませんがコードを投稿してImageを使用することはできません。

、これは..私は私のアヤックスへのhtmlから{{$、言語>のid}}を解析する

$(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(); 
    }); 

}); 

私のAjaxのですが、私は方法がわかりません関数onclickを使用しない場合

Answer 1

問題私はIDを取得することはできませんなぜ私は最初のIDを取得するので、それは..ですので、私はすべての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(); 
}); 

}を取得するために、それぞれを使用することを決定しました）。

Answer 2

language_idをDataTableに追加しますが、表示しないようにします。それを最初の列に入れる方が良いです。後で列を追加する必要がある場合は、スクリプトを変更する必要はありません。

次に、タブをクリックすると、次のスクリプトを使用してInvisible 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 

スクリプト（私はあなたが2番目の列に、あなたの目に見えない言語列を持っていると仮定）

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

また、すべての言語からのすべての投稿を表示All Tabasからを持つことができます。

タブ

<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 }}' 
}