Сортировка двух одинаковых таблиц одновременно

Question

У меня есть две таблицы с одинаковыми столбцами. Эти таблицы размещены рядом друг с другом. В настоящее время они сортируются отдельно. Я хочу, чтобы они были отсортированы вместе. т.е. когда я нажимаю на заголовок первого столбца таблицы 1, обе таблицы должны быть отсортированы, как если бы они были одной таблицей.

Это .js, который я использую

function SortableTable (tableEl) {

this.tbody = tableEl.getElementsByTagName('tbody');
this.thead = tableEl.getElementsByTagName('thead');
this.tfoot = tableEl.getElementsByTagName('tfoot');

this.getInnerText = function (el) {
    if (typeof(el.textContent) != 'undefined') return el.textContent;
    if (typeof(el.innerText) != 'undefined') return el.innerText;
    if (typeof(el.innerHTML) == 'string') return el.innerHTML.replace(/<[^<>]+>/g,'');
}

this.getParent = function (el, pTagName) {
    if (el == null) return null;
    else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
        return el;
    else
        return this.getParent(el.parentNode, pTagName);
}

this.sort = function (cell) {

    var column = cell.cellIndex;
    var itm = this.getInnerText(this.tbody[0].rows[1].cells[column]);
    var sortfn = this.sortCaseInsensitive;

    if (itm.match(/\d\d[-]+\d\d[-]+\d\d\d\d/)) sortfn = this.sortDate; // date format mm-dd-yyyy
    if (itm.replace(/^\s+|\s+$/g,"").match(/^[\d\.]+$/)) sortfn = this.sortNumeric;

    this.sortColumnIndex = column;

    var newRows = new Array();
    for (j = 0; j < this.tbody[0].rows.length; j++) {
        newRows[j] = this.tbody[0].rows[j];
    }

    newRows.sort(sortfn);

    if (cell.getAttribute("sortdir") == 'down') {
        newRows.reverse();
        cell.setAttribute('sortdir','up');
    } else {
        cell.setAttribute('sortdir','down');
    }

    for (i=0;i<newRows.length;i++) {
        this.tbody[0].appendChild(newRows[i]);
    }

}

this.sortCaseInsensitive = function(a,b) {
    aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]).toLowerCase();
    bb = thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]).toLowerCase();
    if (aa==bb) return 0;
    if (aa<bb) return -1;
    return 1;
}

this.sortDate = function(a,b) {
    aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]);
    bb = thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]);
    date1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
    date2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
    if (date1==date2) return 0;
    if (date1<date2) return -1;
    return 1;
}

this.sortNumeric = function(a,b) {
    aa = parseFloat(thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]));
    if (isNaN(bb)) bb = 0;
    return aa-bb;
}

// define variables
var thisObject = this;
var sortSection = this.thead;

// constructor actions
if (!(this.tbody && this.tbody[0].rows && this.tbody[0].rows.length > 0)) return;

if (sortSection && sortSection[0].rows && sortSection[0].rows.length > 0) {
    var sortRow = sortSection[0].rows[0];
} else {
    return;
}

for (var i=0; i<sortRow.cells.length; i++) {
    sortRow.cells[i].sTable = this;
    sortRow.cells[i].onclick = function () {
        this.sTable.sort(this);
        return false;
    }
}

}

Есть только две колонки, и они, вероятно, останутся прежними. Некоторые идеи будут по достоинству оценены.

Answer 1

Я не совсем слежу за вашим HTML (так как вы не включили HTML), поэтому я сам создал простую версию и реализовал сортировку по таблицам. Основная идея состоит в том, что он собирает все данные из таблиц в единую структуру данных javascript, сортирует структуру данных javascript и затем помещает все данные обратно в таблицы.

Это значительно упрощает сортировку, и единственные места, где вам приходится иметь дело со сложностями нескольких таблиц, - это получение данных и их последующее возвращение в таблицы. Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/Z5ywA/. Просто щелкните заголовок столбца, чтобы увидеть обе таблицы, отсортированные по этому столбцу.

Код такой:

function sortTables(colNum) {
    var t1 = document.getElementById("table1");
    var t2 = document.getElementById("table2");
    var data = [], sortFn;

    function sortAlpha(a, b) {
        // deal with empty strings
        var aa = a[colNum].data, bb = b[colNum].data;
        if (!aa) {
            return(!bb ? 0 : -1);
        } else if (!bb){
            return(1);
        } else {
            return(aa.localeCompare(bb));
        }
    }

    function sortNumeric(a, b) {
        // deal with possibly empty strings
        var aa = a[colNum].data, bb = b[colNum].data;
        if (typeof aa == "string" || typeof bb == "string") {
            return(sortAlpha(a, b));
        } else {
            return(aa - bb);
        }
    }

    // get the data
    function getData(table) {
        var cells, rowData, matches, item, cellData;
        var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
        for (var i = 0; i < rows.length; i++) {
            rowData = [];
            cells = rows[i].getElementsByTagName("td");
            for (var j = 0; j < cells.length; j++) {
                // add each cell in the row to the rowData data structure
                item = {};
                item.origStr = cells[j].textContent || cells[j].innerText;
                cellData = item.origStr.replace(/^\s*|\s*$/g, "").toLowerCase();
                if (cellData.match(/^[\d\.]+$/)) {
                    cellData= parseFloat(cellData);
                } else if (matches = cellData.match(/^(\d+)-(\d+)-(\d+)$/)) {
                    cellData= new Date(
                        parseInt(matches[3], 10), 
                        parseInt(matches[1], 10) - 1, 
                        parseInt(matches[2], 10)
                    );
                }
                item.data = cellData;
                // determine the type of sort based on the first cell we find 
                // with data in the column that we're sorting
                if (!sortFn && item.data !== "" && j == colNum) {
                    if (typeof item.data == "number" || typeof item.data == "object") {
                        sortFn = sortNumeric;
                    } else {
                        sortFn = sortAlpha;
                    }
                }
                rowData.push(item);
            }
            // add each row to the overall data structure
            data.push(rowData);
        }
    }

    // put data back into the tables
    function putData(table) {
        var cells, rowData, item;
        var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
        for (var i = 0; i < rows.length; i++) {
            cells = rows[i].getElementsByTagName("td");
            for (var j = 0; j < cells.length; j++) {
                // add each cell in the row to the rowData data structure
                cells[j].innerHTML = data[0][j].origStr;
            }
            // remove this row
            data.shift();
        }
    }


    getData(t1);
    getData(t2);
    data.sort(sortFn);
    putData(t1);
    putData(t2);        

    return(false);
}