0

我正在使用来自这里的 jquery 插件 Datatables 。

问题是它的行为不像它应该的那样。我在 TableTools 中有 2 个按钮，全选和全选，它们背后都有默认代码，我没有对它们进行任何更改。

我还使行多选。这是数据表声明的代码以及几乎所有重要的东西。

var oTable;
var gaiSelected =  [];
oTable = $('#listeLigne').dataTable({
                "sDom": 'T',
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "oLanguage": oLanguage,
                "bLengthChange": false,
                "iDisplayLength": -1,
                "oTableTools": {
                    "sSwfPath" : "<?= _s("js/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf") ?>",
                    "aButtons": [
                        {
                            "sExtends":    "collection",
                            "sButtonText": "Sélection",
                            "aButtons": [ 
                                {
                                    "sExtends":    "select_all",
                                    "sButtonText": "Toutes"
                                },
                                {
                                    "sExtends":    "text",
                                    "sButtonText": "Actives"
                                },
                                {
                                    "sExtends":    "text",
                                    "sButtonText": "Inactives"
                                },
                                {
                                    "sExtends":    "text",
                                    "sButtonText": "Suspendues"
                                },
                                {
                                    "sExtends":    "select_none",
                                    "sButtonText": "Aucune"
                                }
                            ]
                        },
                        {
                            "sExtends":    "collection",
                            "sButtonText": "Sauvegarder",
                            "aButtons":    [ "csv", "xls", "pdf" ]
                        },
                        {
                            "sExtends":    "print",
                            "sButtonText": "Imprimer"
                        }
                    ]
                },
                "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                    if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
                    {
                        $(nRow).addClass('row_selected');
                    }
                    return nRow;
                }
            });

$('#listeLigne tbody tr').live('click', function () {
                var aData = oTable.fnGetData( this );
                var iId = aData[0];

                if ( jQuery.inArray(iId, gaiSelected) == -1 )
                {
                    gaiSelected[gaiSelected.length++] = iId;
                }
                else
                {
                    gaiSelected = jQuery.grep(gaiSelected, function(value) {
                        return value != iId;
                    } );
                }

                $(this).toggleClass('DTTT_selected');
            } );

发生的情况是，如果我单击全选，它将全部选中，然后如果我单击全选，它会取消选择所有内容。但是，如果我单击其中一些并使它们被选中，然后按选择无，则没有任何反应。然后，如果我按全选然后全选，它确实有效。

我一直在查看数据表的内部代码，尝试了许多来自网络的不同解决方案（即使我没有看到很多人遇到同样的问题）。

索取您可能需要的任何其他信息。感谢您提供每一点信息和/或帮助。谢谢你。

4

1 回答 1

0

最后，我为此替换了上面的代码：

oTable = $('#listeLigne').dataTable({
                "sDom": 'T',
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "oLanguage": oLanguage,
                "bLengthChange": false,
                "iDisplayLength": -1,
                "oTableTools": {
                    "sRowSelect": "multi",
                    "sSwfPath" : "<?= _s("js/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf") ?>",
                    "aButtons": [
                        {
                                    "sExtends":    "select_none",
                                    "sButtonText": "Aucune"
                                },
                        {
                            "sExtends":    "collection",
                            "sButtonText": "Sélection",
                            "aButtons": [ 
                                {
                                    "sExtends":    "select_all",
                                    "sButtonText": "Toutes"
                                },
                                {
                                    "sExtends":    "text",
                                    "sButtonText": "Actives"
                                },
                                {
                                    "sExtends":    "text",
                                    "sButtonText": "Inactives"
                                },
                                {
                                    "sExtends":    "text",
                                    "sButtonText": "Suspendues"
                                },
                                {
                                    "sExtends":    "select_none",
                                    "sButtonText": "Aucune"
                                }
                            ]
                        },
                        {
                            "sExtends":    "collection",
                            "sButtonText": "Sauvegarder",
                            "aButtons":    [ "csv", "xls", "pdf" ]
                        },
                        {
                            "sExtends":    "print",
                            "sButtonText": "Imprimer"
                        }
                    ]
                }
            });

$('#listeLigne tbody tr').live('click', function () {
                var oTT = TableTools.fnGetInstance('listeLigne');
                oTT.fnSelect(this);
            } );

所以基本上，第一个是使用通过搜索谷歌“数据表选择行”找到的方法，它为您提供了标准的方法。但是，由于我使用的是 TableTools，所以它有所不同。在这种情况下，必须使用 TableTools 的 API。

请注意，.live 功能并不完整，因为它只会选择，但您明白我的意思。

DataTables 的文档非常完整，但有时很难找到东西，有时有时会过时。

于 2013-03-15T13:46:24.870 回答