将用户重定向到过滤后的数据表时如何进行数据表过滤

Question

在我的网站中，我有一个管理面板，可将用户重定向到数据表。 我希望在用户通过单击面板中提供过滤选项的链接进行重定向时过滤和显示数据表。 我尝试了一些方法，但没有给我任何结果。

管理面板上的链接：

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

数据表过滤选项：

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