1

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

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

4

3 回答 3

4

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

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

代替...

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

尝试这个：

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

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

于 2013-05-23T13:51:40.973 回答
2

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

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

于 2012-07-25T16:08:26.790 回答
2

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

"bLengthChange": true,

到我的数据表声明。

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

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

于 2012-07-25T20:30:17.720 回答