jquery - jquery数据表在第二页不起作用

Question

我正在使用 jquery 数据表 1.9.4 和 jquery 1.9.1，我试图在点击事件上执行这样的 ajax 调用。

$(".icon-trash").on('click',function () {
                // alert($(this).attr('id'));
                $.post('/WorkOrderRequest/DeleteWOR',
                        { id: $(this).attr('id') },

                        function (returndata) 
                        {

                            if (returndata.ok) 
                            {
                                window.alert(' deleted!');
                                $("#emp" + idemployee).hide('slow');
                            }
                            else {
                                window.alert(' error : ' + returndata.message);
                            }

                    });

            });

html部分：

@foreach (var item in Model)
                    {

                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.ProjectCode)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.WO_Date)
                            </td>


                            <td>
                             <a  id='@(item.WO_ID)' class="icon-edit" />
                               |                               
                             <a  id='@(item.WO_ID)' class="icon-trash" />
                           </td>
                        </tr>
                    }

它在第一页上工作正常，但从第二页开始没有显示任何结果。请帮忙

score 30 · Accepted Answer

分页的工作方式是从 DOM 中删除当前页面不需要的行。因此，当 html 被删除时，您直接绑定到这些元素的任何事件处理程序都会丢失。

您需要使用委托语法on()将处理程序绑定到页面中的永久资产。这可能是父表或树上的任何其他父表，包括document

$('#TableID').on('click','.icon-trash',function () {...

API 参考：http ://api.jquery.com/on/

score 16 · Accepted Answer

如果您只是将点击事件代码放在代码上方datatable，js它将正常工作。

作为例子。

$(".icon-trash").on('click',function () {});

$("#TableID").datatable();

score 2 · Accepted Answer

我有同样的问题，我在调用其他代码后通过移动下面的代码解决了这个问题。

$('#yourTable').dataTable();

希望它会帮助某人。

score 0 · Accepted Answer

var table;

$(document).ready(function (){

    table = $('#DataTableId')
        .on('draw.dt', function () {
            yourFunction();
        })

        .DataTable();
});


var yourFunction = function (){

    $('#DataTableId select').off('change')
        .on('change', function () {

        // do whatever

    });

}

score 0 · Accepted Answer

我正在使用 yajra 数据表 + laravel 集合。我花了将近 2-3 个小时来调试它，并找到了如下解决方案。

删除引号字符串表单pageLength参数，它将节省您的时间。

score 0 · Accepted Answer

这是一个老问题，但我遇到了同样的问题，并在 js 点击事件解决后调用数据表（通过下面的脚本）。

$('#tableId').dataTable();

score 0 · Accepted Answer

使用绘图回调。

例子：

$('#example').dataTable( {
    "drawCallback": function( settings ) {
        alert( 'DataTables has redrawn the table' );
    }
} );

https://datatables.net/reference/option/drawCallback

jquery - jquery数据表在第二页不起作用

7 回答 7

Related

Reference