Question

我遇到了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不会触发。

有人有想法吗？非常感谢你们，并祝你们度过愉快的一天。

Answer 1

我意识到这个问题已经得到了回答，然而，这个问题是不完整的，所有应有的尊重都可能是错误的。 mutipage数据表的问题在于，当用户点击默认第一页以外的任何页面时，初始选择器变得无用。这是因为dataTable为DOM做了一些可怕的事情来呈现表格。这会产生禁用点击处理程序的副作用。

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

而不是......

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

试试这个：

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

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

Answer 2

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

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

Answer 3

通过添加以下内容，我终于完成了所有工作：

"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 datatable声明中添加了其他选项，这样更容易阅读。 value=-1部分是如何在所有行/单元格上加载javascript。

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

链接不能与多个页面一起使用的jQuery Datatable javascript

3 个答案: