2017-05-16 2 views
2

zwei Anfragen in ein Javascript

$("input[type='checkbox']").on("change",function(){ 
 
    if($(this).is(":checked")){ 
 
     $.ajax({ 
 
      url: portfolio_data_url, 
 
      type: 'POST', 
 
      data: "id="+$(this).val(), 
 
      success:function(r){ 
 
      // succcess call 
 
      } 
 
     }) 
 
    } 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<form> 
 
    <div><input type="checkbox" value="0" checked>All</div> 
 
    <div><input type="checkbox" value="1">AppID</div> 
 
    <div><input type="checkbox" value="2">Vendor</div> 
 
</form>

Ich habe mehrere Kontrollkästchen, deren Werte mit einer POST-Anforderung übergeben. Wenn ein Kontrollkästchen ausgewählt ist, wird der Wert an die POST-Anfrage übergeben.

Aber ich habe bereits Code, der POST-Anfragen passiert:

list.js

$(function() { 
    var table = $("#portfolio").DataTable({ 
     "ajax": { 
      "url": portfolio_data_url, 
      "type": "POST" 
     },  
     lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],  
     "stateSave": true, 
     "processing": true, 
     "serverSide": true, 
     "deferRender": true, 
     "language": datatables_language,  
     "order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],  
     "columnDefs": [ 
      { 
       "searchable": false, 
       "orderable": false, 
       "targets": "no-sort" 
      } 
     ] 
    }) 
}); 

Wie kann ich den Code in das list.js für alles integrieren mit einer Abfrage zu gehen.

Da jetzt zwei verschiedene Anfragen gesendet werden, die zu einer falschen Ausgabe von Informationen führen.

Antwort

1

Sie .DataTable Funktion können Kontrollkästchen aktiviert Wert in einer Anfrage wie unten senden:

Try this:

$(function() { 
    var table = $("#portfolio").DataTable({ 
     "ajax": { 
      "url": portfolio_data_url, 
      "type": "POST", 
      "data": function(d){ 
       var ids = $('input:checkbox:checked').map(function(){ 
         return this.value; 
       }).get(); 
       d.ids = ids; 
      } 
     },  
     lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],  
     "stateSave": true, 
     "processing": true, 
     "serverSide": true, 
     "deferRender": true, 
     "language": datatables_language,  
     "order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],  
     "columnDefs": [ 
      { 
       "searchable": false, 
       "orderable": false, 
       "targets": "no-sort" 
      } 
     ] 
    }) 
}); 

In Datatable Mit dem data Parameter als eine Funktion zum Server der zusätzlichen Daten ermöglicht

Official Documentation

Hinweis zu senden: Sie werden geprüft Kontrollkästchen Wert als Array erhalten, Sie .join(',') nach .get() können Werte zu senden, wie kommagetrennte Zeichenfolge direkt in Abfrage verwenden

auch wenn Benutzer eine Checkbox, dann können wir Datentabelle ajax aktualisieren aktualisiert senden geprüft Kontrollkästchen wie unten:

$("input[type='checkbox']").on("change",function(){ 
    table.ajax.reload(); 
}); 
+0

Ehrfürchtig, danke! – John

+0

@John Sie willkommen! –

0

Es sieht so aus, als ob die Ajax-Funktion, die Sie wiederverwenden möchten, von DataTable ist. Es ist keine gute Idee, die Ajax-Funktion zu verwenden, die von einem anderen Plugin verwendet wird.

Hier wird der Ajax-Aufruf, den Sie erneut verwenden möchten, von der Funktion DataTable verwendet. Anstatt sie erneut zu verwenden, können Sie eine Nachbearbeitungsfunktion erstellen, die eine AJAX-Anfrage stellt. Jedes Mal, wenn Sie eine AJAX-Anfrage stellen möchten, können Sie diese Funktion mit den angegebenen Parametern aufrufen. Beispiel:

function customAjax(url,data,method,success_message,fail_message){ 
    $.ajax({ 
     url:url, 
     data:data, 
     method:method, 
     success:function(response){ 
      alert(success_message); 
     }, 
     error:function(response){ 
      alert(fail_message); 
     } 
    }); 
} 

Und Anruf mit:

customAjax("xyx.php","username=abc&password=ushfush","POST","Login Successfull","Something went wrong"); 
Verwandte Themen