链接上的jQuery Datatable javascript不适用于多个页面

jQuery Datatable javascript on links not working with multiple pages

本文关键字：适用于 不适用 javascript jQuery Datatable 链接      更新时间：2024-02-09

我的jQuery的Datatable插件有问题。。。我已经填写了一个表格，特定列中的单元格如下所示：

<a href="26" name="PO">12</a>

我已经阻止了onclick事件，它触发了以下代码：

$( 'a[name="PO"]' ).click(function(){
            event.preventDefault();
            var POid = $( this ).attr('href');
            var element = $( this );
            $( '<div id="Dialog">'
                <p class="error"></p>'
                <p style="text-align:center;" class="main">Entrez le P.O. associé à la commande</p>'
                <input type="text" class="POprompt"/>'
                </div>').dialog({
                resizable: false,
                height: 'auto',
                width:'400',
                modal: true,
                title: 'Ajout d''un PO',
                show: 'blind',
                hide: 'drop',
                buttons:{
                    "Sauvegarder":function() {
                        $('.error').css('color','FF0000');
                        var prompt = $('.POprompt').val();
                        if (!isNaN(parseInt(prompt)))
                        {
                            $.post('setPO.php',{'PO':prompt,'id':POid},function(data)
                            {
                                element.text( prompt );
                                $('.main').css('color','#0F0');
                                $('.POprompt').css('visible','false');
                                $('.main').text("L''ajout a été effectué avec succès.")
                                $( this ).dialog( "close" );
                                $('.error').text("");
                                $('.error').css('color','#FFF');
                            });
                        }
                        else
                        {
                            var error = $('.error');
                            error.text("Veuillez entrer des chiffres seulement.");
                            error.addClass( "ui-state-highlight" );
                            setTimeout(function() {
                                error.removeClass( "ui-state-highlight", 1500 );
                            }, 1000 );
                        }
                        $('.error').css('color','FF0000');
                    },
                    "Annuler":function() 
                        {
                            $( this ).dialog( "close" );
                        }       
                }
            } );
        });

但是，当我进入第2页或第3页时，或者当我对结果进行排序并单击该单元格链接，但该行是在第一个页面之外的另一个页面中生成的时，javascript不会触发。

有人有主意吗？提前感谢各位，祝你们今天愉快。

我意识到这个问题已经得到了回答，但它是不完整的，恕我直言，它可能是错误的。多页数据表的问题是，当用户单击默认第一页以外的任何页面时，初始选择器都会变得毫无用处。这是因为dataTable对DOM做了一些可怕的事情来渲染表。这会产生禁用单击处理程序的副作用。

好消息是，除了列出所有元素之外，还有一种方法可以处理这个问题。

而不是。。。

$( 'a[name="PO"]' ).click(function(){

试试这个：

$( "#dataTable tbody" ).on('click', 'a[name="PO"]', function(){

阅读这个jquery页面（on（）），并查找有关延迟选择器的部分。

因为当javascript插入元素来记录时，它没有onclick。jQuery不会自动向它们添加onclick。

解决方案：每次加载数据时（当用户更改页面或对表排序时）调用此脚本。

我终于通过添加以下内容使一切正常工作：

"bLengthChange": true,

到我的数据表声明。

我还修改了<select>选项，添加了一个"show all"选项，默认情况下加载所有行，但由于我设置了"iDisplayLength": 5，因此在页面加载时只显示5行。以下是如何在长度选择输入（总和）中添加"显示所有"值：

$(document).ready(function(){
    $('table').dataTable({
        "bLengthChange":true,
        "bFilter":true,
        "iDisplayLength": 5,
        "sDom":'<"H"lfr>t<"F"ip>',
        "oLanguage":{
            "sUrl": "dataTables.txt"
        }
    });
});

文本文件包含您的所有翻译（如果您需要）和您的自定义SELECT：

{
    "sProcessing":     "Processing...",
    "sLengthMenu": "Show <select><option value=-1>INFINITE</option></select> results"
}

注意：当然，我在select AND数据表声明中添加了其他选项，这样读起来更容易。value=-1部分是如何在所有行/单元格上加载javascript。

感谢那些试图帮助我的人，你的两个答案对我都很有用！

相关文章：