필터링 된 데이터 테이블로 사용자를 리디렉션 할 때 Datatable 필터를 수행하는 방법

Question

내 웹 사이트에서 사용자를 datatable로 리디렉션하는 관리자 패널이 있습니다. 사용자가 필터링 옵션을 제공하는 패널의 링크를 클릭하여 리디렉션 할 때 데이터 테이블을 필터링하고 표시하려고합니다. 몇 가지 방법을 시도했지만 결과가 나에게 주어지지 않았습니다.

관리자 패널의 연결 :

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

데이터 테이블 filterby 옵션 : 데이터 테이블 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> 

AJAX 호출 :

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

이이 경우에 작동 할 수 있습니다.

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

정의 된 함수에 데이터 테이블 코드를 쓰지 마십시오. 코드는 다음과 같습니다. 작동해야합니다.

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