數據表和下拉列表在jQuery行中選擇

Question

我正在使用datatables.net的腳本，並在一行中選擇一個下拉菜單，在那里我可以選擇狀態。

我正在使用此代碼：

<script>
$(function () {

    $('#select-first').on('change', function () {

        var options = $(this).find('option:selected').val();
        var ids = "<?php echo $ord['order_id']; ?>";
        var selecto = 'id=' + ids + '&option=' + options;

        $.ajax({
            type: "POST",
            url: "update_status.php",
            data: selecto,
            cache: false,
            success: function (html) {
                alert("yes");
            }
        });
    });
});
</script>
<select id="select-first" name="status" class="ui compact dropdown">
    <option value="1">Behandlas</option>
    <option value="2">Bearbetas</option>
    <option value="3">Nekades</option>
    <option value="4">Klar</option>
    <option value="5">Klar/Betald</option>
</select>

當我在datatables腳本中選擇第2頁時，它將不起作用。

Answer 1

加載Datable時，它將刪除當前未顯示的多余HTML。 因此，如果您要附加事件，則可以有多種選擇：

1.在調用函數數據表之前附加事件

    $('.select-first').on('change', function(e) {

    alert("hej");
    var options = $(this).find('option:selected').val();
    var ids = "<?php echo $ord['order_id']; ?>";
    var selecto = 'id='+ ids + '&option='+ options;
});
$('#myTable').DataTable();

2.使用委托函數：

$('#myTable').DataTable();

$('#myTable').delegate('.select-first', 'change', function () {


    alert("hej");
    var options = $(this).find('option:selected').val();
    var ids = "<?php echo $ord['order_id']; ?>";
    var selecto = 'id='+ ids + '&option='+ options;
});

3.使用fnDrawCallback

$('#myTable').DataTable({"fnDrawCallback": function( oSettings ) {
     $('.select-first').on('change', function(e) {

    alert("hej");
    var options = $(this).find('option:selected').val();
    var ids = "<?php echo $ord['order_id']; ?>";
    var selecto = 'id='+ ids + '&option='+ options;
});
}});

那應該足夠了

1. http://jsfiddle.net/h2m1vg29/3/

2. http://jsfiddle.net/h2m1vg29/2/

3. http://jsfiddle.net/h2m1vg29/1/