Yajra Comment analyser l'ID de html en ajax sans utiliser onclick

Question

J'ai un datatable avec plus de 1 onglet. Je veux afficher mes données de la table de poste dans le datatable, mais dans la table de mon message j'ai la colonne LanguageID. Donc, je veux séparer les données par LanguageID et c'est pourquoi j'utilise tab. Mais, j'ai un problème quand je veux obtenir le LanguageID.

Ceci est mon avis .. Désolé, je ne peux pas poster le code et en utilisant Image parce que j'ai @foreach dans mon code.

et voici mon 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(); 
    }); 

}); 

Je veux analyser {{$ anglais-> id}} de html dans mon ajax .. mais je ne sais pas comment faire cela sans utiliser la fonction onclick

Answer 1

Problème pourquoi je ne peux pas obtenir l'identifiant, qui est parce que je ne reçois que le premier id .. Alors, je décide d'utiliser chacun pour obtenir toutes les 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

Ajoutez language_id à votre DataTable, mais le rendre invisible. Il est préférable de le mettre dans les toutes premières colonnes. (Plus tard si vous devez ajouter des colonnes, vous n'aurez pas besoin de modifier vos scripts)

Ensuite, lorsque vous cliquez sur les onglets, filtrez DataTable base sur la colonne language_id invisible en utilisant le script suivant;

onglets:

@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 

Scripts (je suppose que vous avez votre colonne de langue invisible dans la deuxième colonne)

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

Vous pouvez aussi avoir un All Tabas qui montrent tous les messages de toutes les langues.

Tabs

<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 

Scripts:

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

Vous pouvez également filtrer DataTable sur sa première demande ajax (quelque chose comme filtrage par défaut).

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