Ich habe eine DataTables-Tabelle, die in einigen Kopfzeilenspalten Kontrollkästchen und Popups enthält. (Außerdem verwende ich auch FixedColumn- und ColReorder-Plugins). Ein Modell von dem, was ich in einer Jsfiddle habe, ist am unteren Rand

Mein Problem ist, dass das Sortierereignis alles übernimmt, wenn ein Benutzer versucht, die Kontrollkästchen zu aktivieren oder die Popups zu öffnen. Die jsfiddle-Seite funktioniert nicht vollständig, weil ich in meiner App die Ereignisse für das Aktivieren des Kontrollkästchens erhalte, aber es ist zu spät, die Sortierung erfolgt ebenfalls. Das Sortiersymbol ist nur ein Hintergrund-CSS für die Header-Zellen, und das Sortierereignis wird von DataTables für die gesamte Header-Zelle registriert.

Pläne, um dieses Problem zu lösen:

Registrieren Sie die Handler und versuchen Sie, die Ausführung der Handler von Datatables zu verhindern. Wenn ich ab sofort auch einen Ereignishandler für die Headerzellen registriere, erhalte ich das Ereignis erst, nachdem der Handler von DataTable die Ereignisse in der Registrierungsreihenfolge übermittelt hat. Ich habe auch Handler für das Kontrollkästchen und das Popup selbst registriert, aber diese werden auch erst nach den Handlern von DataTables ausgeliefert (sprudelt). Dies könnte nur funktionieren, wenn ich meinen Handler irgendwie vor dem DataTables-eigenen Handler registrieren könnte, aber ich habe keinen Einstiegspunkt dafür gefunden. Die Tabelle DOM sollte bereits generiert sein, wenn das Ereignis registriert wird. Im Moment sehe ich zu spät Gelegenheiten, ich kann mich nur registrieren.Finden eines API-Aufrufpunkts, an dem ich die Sortierung von DataTables abbrechen konnte. Das Bestellereignis http: //datatables.net/reference/event/orde) scheint nachträglich zu sein, ich sehe keinen Weg für eine Stornierung. Irgendwann habe ich die nicht festgelegten Spaltenüberschriften so umstrukturiert, dass sie zwei Zeilen enthalten: Die obere Zeile diente zum Sortieren und die untere enthielt meine Kontrollkästchen- und Popup-Steuerelemente. Das schien zu funktionieren, außer dass sich herausstellte, dass es mit dem ColReorder-Plugin nicht funktioniert. Ich brauche das Plugin und es hat nur die obere Zeile der Kopfzeile neu angeordnet, die untere ist dort geblieben. Wenn ich das beheben könnte, wäre es auch eine Lösung.

http: //jsfiddle.net/csabatoth/pgue1sf5/8

var initPage = function () {
    var columnsArray = [
        { "title": "index", "class": "dt-center" },
        { "title": "lastname", "class": "dt-head-center dt-body-left" },
        { "title": "firstname", "class": "dt-head-center dt-body-left" },
        { "title": '<div>foo1</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-head-center dt-body-left" },
        { "title": '<div>foo2</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>foo3</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>foo4</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>bar1</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>bar2</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>bar3</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" }
    ];

    var dataArray = [
        [ 1, "aaa", "rrr", "x", "x", "x", "x", "x", "x", "x" ],
        [ 2, "bbb", "qqq", "x", "x", "x", "x", "x", "x", "x" ],
        [ 3, "ccc", "ppp", "x", "x", "x", "x", "x", "x", "x" ],
        [ 4, "ddd", "ooo", "x", "x", "x", "x", "x", "x", "x" ],
        [ 5, "eee", "nnn", "x", "x", "x", "x", "x", "x", "x" ],
        [ 6, "fff", "mmm", "x", "x", "x", "x", "x", "x", "x" ],
        [ 7, "ggg", "lll", "x", "x", "x", "x", "x", "x", "x" ],
        [ 8, "hhh", "kkk", "x", "x", "x", "x", "x", "x", "x" ],
        [ 9, "iii", "jjj", "x", "x", "x", "x", "x", "x", "x" ]
    ];

    viewModel.table = $('#MyTable').DataTable({
        dom: "Rrtip",
        autoWidth: false,
        deferRender: true,
        info: true,
        lengthChange: false,
        ordering: true,
        orderMulti: true,
        orderFixed: {
            pre: [0, 'asc'],
            post: [1, 'asc']
        },
        paging: true,
        pagingType: "full_numbers",
        renderer: "bootstrap",
        processing: true,
        scrollX: true,
        scrollY: false,
        searching: false,
        columns: columnsArray,
        data: dataArray,
        initComplete: function (settings, json) {
            viewModel.attachTableEventHandlers();
        },
        displayLength: 5,
        colReorder: {
            fixedColumnsLeft: 3,
            fixedColumnsRight: 0
        }
    });
    new $.fn.dataTable.FixedColumns(viewModel.table, {
        leftColumns: 3
    });