javascript - 数据表和下拉列表选择行 jQuery

标签 javascript jquery ajax datatables

我正在使用 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>

当我在数据表脚本中选择第 2 页时,它将不起作用。

最佳答案

当 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。使用委托(delegate)函数:

$('#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/

关于javascript - 数据表和下拉列表选择行 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31202466/

相关文章:

php - 多个实例时使用 PHP AJAX 更新表记录

.net - 根据数据输入问题进行过滤

javascript - 如何从函数内部获取 JavaScript 变量值?

Jquery 在嵌套跨度中淡出

javascript - 返回用户生成的文件、AJAX 或表单的最佳方式?

javascript - UI 对话框在使用 jQuery 的 setTimeout 中不起作用

javascript - 如何使用动画颜色变化突出显示搜索词

javascript - 如何创建队列以便等待 5 秒执行函数

javascript - 轮播需要在页面加载时从中间幻灯片开始

javascript - 有条件地加载 polyfill