Comment faire un filtre Datatableby lors de la redirection de l'utilisateur vers la datable filtrée

Question

Sur mon site web, j'ai un panneau d'administration qui redirige l'utilisateur vers un datatable. Je veux que la datatable soit filtrée et affichée lorsque l'utilisateur redirige en cliquant sur le lien dans le panneau qui donne l'option de filtrage. J'ai essayé quelques méthodes mais cela ne m'a donné aucun résultat.

Le lien sur le panneau d'administration:

<a href="listings/action=filterByState&status=DRAFT" class="small-box-footer"> 
    More info <i class="fa fa-arrow-circle-right"></i> 
</a> 

Datatable option filterby:

<select id="status" name="status" class="form-control"> 
    <option value="ALL">All</option> 
    <option value="<?php echo(ListingStatus::PUBLISHED); ?>"> 
     <?php echo(ListingStatus::PUBLISHED); ?></option> 
    <option value="<?php echo(ListingStatus::DRAFT); ?>"> 
     <?php echo(ListingStatus::DRAFT); ?></option> 
    <option value="<?php echo(ListingStatus::SCHEDULED); ?>"> 
     <?php echo(ListingStatus::SCHEDULED); ?></option> 
</select> 

appel AJAX pour l'option DataTable filterby:

function filterListingsByStatus(){ 
    $("#listingTbl").DataTable().destroy(); 

    var filterStatus = $("#status").val(); 

    $('#listingTbl').DataTable({ 
     "serverSide": true, 
     "processing": true, 
     "ordering": false, 
     "searchDelay": 1000, 
     "ajax": "listing-controller.php?action=filterByState&status="+filterStatus, 
     "columns": [ 
      {"data": "id", "visible": false}, 
      {"data": "title"}, 
      {"data": "categories"}, 
      {"data": "tags"}, 
      {"data": "status"}, 
      {"data": "ext_ref_id"}, 
      { 
       mRender: function (data, type, row) { 
        var linkEdit = '<a href="edit-listing.php?id=listingId">Edit</a>'; 
        linkEdit = linkEdit.replace("listingId", row.id); 

        var linkDel = "<a href=\"#\" onclick=\"deleteListing(\'id\',\'title\')\">Delete</a>"; 
        linkDel = linkDel.replace("id", row.id); 
        linkDel = linkDel.replace("title", row.title); 

        return linkEdit + " | " + linkDel; 
       } 
      } 
     ], 
     "columnDefs": [ 
      {"searchable": false, "targets": [0, 2, 3, 4, 5]} 
     ], 
     "language": { 
      "searchPlaceholder": "by Title" 
     }, 
     "pageLength": 25 
    }); 
} 

Answer 1

Cela pourrait fonctionner dans votre cas.

$('#status').change(function(){ 
    $('#listingTbl').DataTable().ajax.reload(); 
}); 

N'écrivez pas votre code datatable dans une fonction définie. Voici votre code devrait ressembler. ça devrait marcher.

<script type="text/javascript"> 
    $(function(){ 

     $('#status').change(function(){ 
      $('#listingTbl').DataTable().ajax.reload(); 
     }); 

     //var filterStatus = $("#status").val(); 

     $('#listingTbl').DataTable({ 
     "serverSide": true, 
     "processing": true, 
     "ordering": false, 
     "searchDelay": 1000, 
     "ajax": "listing-controller.php?action=filterByState&status="+$("#status").val(), 
     "columns": [ 
      {"data": "id", "visible": false}, 
      {"data": "title"}, 
      {"data": "categories"}, 
      {"data": "tags"}, 
      {"data": "status"}, 
      {"data": "ext_ref_id"}, 
      { 
       mRender: function (data, type, row) { 
        var linkEdit = '<a href="edit-listing.php? 
          id=listingId">Edit</a>'; 
        linkEdit = linkEdit.replace("listingId", row.id); 

        var linkDel = "<a href=\"#\" 
        onclick=\"deleteListing(\'id\',\'title\')\">Delete</a>"; 
        linkDel = linkDel.replace("id", row.id); 
        linkDel = linkDel.replace("title", row.title); 

         return linkEdit + " | " + linkDel; 
        } 
       } 
      ], 
      "columnDefs": [ 
      {"searchable": false, "targets": [0, 2, 3, 4, 5]} 
      ], 
      "language": { 
       "searchPlaceholder": "by Title" 
      }, 
      "pageLength": 25 
     }); 
    }); 
</script>