Управление заполнением thead и tbody при обработке serverSide в dataTables

Question

Я использую плагин DataTables для выборки и разбивки на страницы моей таблицы с помощью вызовов ajax. Мое требование состоит в том, что мне нужно сортировать только те, которые я получил, т.е. сортировку на стороне клиента при выборке на стороне сервера.

Для этого я использую TableSorter вместе с плагином dataTables. Мой код выглядит примерно так -

$("#ProposalSearchResults").html('<table cellpadding="0" id="proposalsTable" cellspacing="0" border="1 px" class="dataTable tablesorter">');
        $("#proposalsTable").tablesorter();
        $("#proposalsTable").dataTable({
            "bPaginate": true,
            "bJQueryUI": true,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": true,
            "bAutoWidth": false,
            "bServerSide":true,
            "iDisplayLength": 10,
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                            {"sTitle" : "Proposal Id"},
                            {"sTitle" : "Release Candidate Id"},
                            {"sTitle" : "Proposal Description"},
                            {"sTitle" : "Application"},
                            {"sTitle" : "Requester"},
                            {"sTitle" : "Proposal Status"},
                            {"sTitle" : "Proposal Creation Date", "sType": "full_date" },
                            {"sTitle" : "Proposal Planned Deployment Date", "sType": "full_date" },
                            {"sTitle" : "Action"}
                        ],
            "sAjaxSource": "/searchProposals",
            "fnServerData": function(sSource, aoData, fnCallback){
                aoData.push({"name" : "searchCriteria", "value" : JSON.stringify(proposalSearchCriteria)});

                $.ajax({
                    "dataType": "json",
                    "type" : "GET",
                    "url" : sSource,
                    "data" : aoData,
                    "success" : function (serviceOutput){
                        fnCallback(serviceOutput.ret);
                        $("#proposalsTable").trigger("update");
                    }
                });
           }
        });

Теперь проблема заключается в том, что поскольку в начале thead и tbody таблицы не сформированы, возвращается метод tablesorter () и сортировка на стороне клиента не достигается. Хотя, когда я делаю то же самое с созданием thead и tbody, а затем заполняю его через ajax, это работает. Я не смог декодировать код dataTables, поэтому не знаю, какой метод на самом деле рисует / записывает эти тела и таблицы в таблицу, которую можно переопределить, чтобы в ней был также этот вызов TableSorter.

Может кто-нибудь, пожалуйста, помогите мне здесь.

Answer 1

Вы должны позвонить $("#proposalsTable").tablesorter(); после вызова dataTables ().Таким образом, datatables создает секции <thead> и все <th> (всю правильную разметку и т. Д.), К которым вы можете прикрепить события TableSorter.Если вы делаете то же самое, что и <th>, чтобы прикрепить к нему события, то tablesorter() не получается.Помните, что вы можете прикреплять события только к элементам, уже существующим в DOM (хорошо, есть несколько способов присоединить также к элементам, добавленным после того, как DOM готов, как jQuery live (), но я не думаю, что TableSorter использует их), у васcase datatables создает разметку для таблицы.