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

Posted 2023-02-22

【中文标题】jquery数据表在第二页不起作用

【英文标题】：jquery data table not working from second page

【发布时间】：2013-04-13 17:40:42

【问题描述】：

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

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

【问题讨论】：

second page 是什么意思？在表格中使用分页？

是的，我在我的数据表中使用分页

【参考方案1】：

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

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

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

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

【讨论】：

这是这个问题的最佳答案。

【参考方案2】：

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

例如。

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

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

【讨论】：

好答案！顺序确实很重要，非常感谢

如果数据表 ID 未绑定（如在接受的答案中），那么是的，顺序确实很重要。如果你绑定它，那么逻辑去哪里似乎并不重要。我已经以两种方式对其进行了测试，并且它们都有效。绑定它似乎更安全。

非常感谢@Mujtaba Ahmad，这救了我！

【参考方案3】：

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

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

希望对某人有所帮助。

【参考方案4】：

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

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

【参考方案5】：

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

去掉pageLength参数中的引号，这样可以节省你的时间。

【参考方案6】：

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

    );

【讨论】：

虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并将这些知识应用到他们自己的代码中。在解释代码时，您也可能会以赞成票的形式从用户那里获得积极的反馈。

【参考方案7】：

使用绘图回调。

例子：

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

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