Question

我想使用select选项过滤我的数据表，以下是我的代码。

表格

var t = $('#warehouseList').DataTable( {
        'columnDefs': [
              {
                "targets": 0,
                "orderable": false
              }
           ],
        "processing": true,
        "serverSide": true,
        "ajax": "<?=site_url('purchase_order/master/inwardData')?>",
        error: function(){  // error handling
          $(".warehouseList-error").html("");
          $("#warehouseList").append('<tbody class="warehouseList-error"><tr><th colspan="7">No data found in the server</th></tr></tbody>');
          $("#warehouseList_processing").css("display","none");
        }
    });

    $('#POStat').change(function(){
         t
        .columns(8)
        .search( this.value )
        .draw();
    });

每当我更改选项时，它只是刷新表，但不会根据所选值进行过滤。任何建议都表示赞赏。

Answer 1

你的

.search( this.value )

应该是

.search($("#POStat :selected").val())

或取决于您的选择选项。

Answer 2

这里我使用PHP会话解决了这个问题。当我使用ajax请求从下拉列表中选择选项时，会在会话变量中保存搜索键。并使用t.destroy();销毁当前表的初始化。

然后从php函数/脚本重新初始化数据表，我可以在其中获得过滤结果。

我不知道这是否正确，但它帮助我过滤结果。可能对任何人都有帮助。

这是我的代码。

<div class="postatus" style="float: left;">
                <!--form id="managePOstatus" action="<?=site_url('purchase_order/master/inwardData2')?>" method="POST" id="filterPO"-->
                    <select id="POStat" name="orderstatus" class="input-text">
                        <option value="" selected disabled>Select Option</option>
                        <option value="pickup_confirm">Pickup Confirmed</option>
                        <option value="pickup_assign">Pickup Person Assign</option>
                        <option value="product_delivered">Product Delivered</option>
                    </select>
                    <input type="button" value="Filter" id="filterPO">
                    <input type="button" value="Reset" id="filterPOReset" disabled>
                <!--/form-->
                </div>    
<table id="warehouseList" class="table table-bordered table-striped">
                          <thead>
                              <tr>
                                  <th width="5%"><input type="checkbox" id="selector"></th>
                                  <th width="10%">PO ID</th>
                                  <th width="15%">Product Name</th>
                                  <th width="10%">Quantity</th>
                                  <th width="10%">warehouse ID</th>
                                  <th width="10%">Seller Name</th>
                                  <th width="10%">Price</th>
                                  <th width="10%">Total Price</th>
                                  <th width="10%">Status</th>
                                  <th width="10%">Date</th>
                              </tr>
                          </thead>

                        </table>

JS代码：

var t = $('#warehouseList').DataTable( {
        // 'searching': false,
        'columnDefs': [
              {
                "targets": 0,
                "orderable": false
              }
           ],
        "processing": true,
        "serverSide": true,
        "ajax": "<?=site_url('purchase_order/master/inwardData')?>",
        error: function(){  // error handling
          $(".warehouseList-error").html("");
          $("#warehouseList").append('<tbody class="warehouseList-error"><tr><th colspan="7">No data found in the server</th></tr></tbody>');
          $("#warehouseList_processing").css("display","none");
        }
    });
$('#filterPO').click(function(){
        t.destroy();
        $(this).prop('disabled', true);
        $('#filterPOReset').prop('disabled', false);
        var stat = $('#POStat').val();
        var req = 'yes';
        console.log('value sent:'+stat);
        $.ajax({
            dataType: "json",
              type : 'POST',
              data:{status:stat,req:req},
              url: "<?=site_url('purchase_order/master/inwardData3')?>", // call here the function to get  

              success: function (data)
              {
                  console.log(data);
              }

        });

        $('#warehouseList').DataTable({
        'columnDefs': [
              {
                "targets": 0,
                "orderable": false
              }
           ],
        "processing": true,
        "serverSide": true,
        "ajax": "<?=site_url('purchase_order/master/inwardData2')?>",       
        error: function(){  
          $(".warehouseList-error").html("");
          $("#warehouseList").append('<tbody class="warehouseList-error"><tr><th colspan="7">No data found in the server</th></tr></tbody>');
          $("#warehouseList_processing").css("display","none");
        }
    });
    });

function inwardData包含默认表，inwardData3在会话中保存搜索值，inwardData2加载过滤后的数据。但我需要在每次过滤后使用location.reload()重置页面。

如何使用自定义文件管理器筛选数据表列

2 个答案: