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

【问题标题】：jQuery Datatable javascript on links not working with multiple pagesjQuery Datatable javascript上的链接不适用于多个页面
【发布时间】：2012-07-24 03:08:08
【问题描述】：

我在使用 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 不会触发。

有人有想法吗？非常感谢你们，祝你们有美好的一天。

【问题讨论】：

标签： javascript jquery sorting plugins datatable

【解决方案1】：

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

好消息是，除了列出所有元素之外，还有其他方法可以处理此问题。

而不是...

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

试试这个：

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

阅读此 jquery 页面 (on()) 并查找有关延迟选择器的部分。

【讨论】：

【解决方案2】：

因为当 javascript 插入元素到文档时它没有 onclick。 jQuery 不会自动为它们添加 onclick。

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

【讨论】：

【解决方案3】：

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

"bLengthChange": true,

到我的数据表声明。

我还修改了<select> 选项，添加了一个“显示全部”选项，该选项默认加载所有行，但由于我设置了"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 加载到所有行/单元格上。

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

【讨论】：