Question

我正在使用jquery Data table 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>
                    }

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

Answer 1

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

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

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

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

Answer 2

如果您只是将点击事件代码放在datatable上的js代码上方，它就能正常运行。

例如。

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

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

Answer 3

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

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

希望它会对某人有所帮助。

Answer 4

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

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

Answer 5

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

从pageLength参数中删除引号字符串，这将节省您的时间。

Answer 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

    });

}

Answer 7

使用绘制回调。

示例：

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

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

jquery数据表无法从第二页开始工作

7 个答案: