JS сортировка таблицы

[ProFTP]

как сделать чтобы по нажатию по строке в колонке вверху таблицы, был запрос в скрипт!!?

как тут сделано:
Вакансия Компания Город(а) Технологии Дата
http://www.developers.org.ua/jobboard/

и когда идет сортировка по какому-то полю, то ввыводится маленькая стрелочка с права, это либа JS делает?

[Хостинг HostFood.ru]

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/

[Alex Keda]

сохранить страницу и посмотреть - ниасилил чтоли? там всё есть:

Код: Выделить всё

/*
 SortTable
 version 2
 7th April 2007
 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/
 Instructions:
 Download this file
 Add <script src="sorttable.js"></script> to your HTML
 Add class="sortable" to any table you'd like to make sortable
 Click on the headers to sort
 Thanks to many, many people for contributions and suggestions.
 Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
 This basically means: do what you want with it.
 */
var stIsIE = /*@cc_on!@*/ false;
sorttable = {
    init: function() {
        
        // quit if this function has already been called
        if (arguments.callee.done) 
            return;

        // flag this function so we don't do the same thing twice
        arguments.callee.done = true;

        if (!document.createElement || !document.getElementsByTagName)
            return;

        sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
        
        var isImgPreloaded = false;
        
        forEach(document.getElementsByTagName('table'), function(table) {

            if (table.className.search(/\bsortable\b/) != -1) {

                sorttable.makeSortable(table);

                if(!isImgPreloaded) {
                    // Sort icons preload
                    var azImg = new Image();
                    azImg.src = "/static/images/az.gif";

                    var zaImg = new Image();
                    zaImg.src = "/static/images/za.gif";
                    
                    isImgPreloaded = true;
                }
            }
        });
    },

    makeSortable: function(table) {
        if (table.getElementsByTagName('thead').length == 0) {
            // table doesn't have a tHead. Since it should have, create one and
            // put the first table row in it.
            the = document.createElement('thead');
            the.appendChild(table.rows[0]);
            table.insertBefore(the, table.firstChild);
        }

        // Safari doesn't support table.tHead, sigh
        if (table.tHead == null) 
            table.tHead = table.getElementsByTagName('thead')[0];

        if (table.tHead.rows.length != 1) 
            return; // can't cope with two header rows

        // Sorttable v1 put rows with a class of "sortbottom" at the bottom (as
        // "total" rows, for example). This is B&R, since what you're supposed
        // to do is put them in a tfoot. So, if there are sortbottom rows,
        // for backwards compatibility, move them to tfoot (creating it if needed).

        sortbottomrows = [];

        for (var i = 0; i < table.rows.length; i++) {
            if (table.rows[i].className.search(/\bsortbottom\b/) != -1) {
                sortbottomrows[sortbottomrows.length] = table.rows[i];
            }
        }

        if (sortbottomrows) {
            if (table.tFoot == null) {
                // table doesn't have a tfoot. Create one.
                tfo = document.createElement('tfoot');
                table.appendChild(tfo);
            }

            for (var i = 0; i < sortbottomrows.length; i++) {
                tfo.appendChild(sortbottomrows[i]);
            }

            delete sortbottomrows;
        }

        // work through each column and calculate its type
        headrow = table.tHead.rows[0].cells;

        for (var i = 0; i < headrow.length; i++) {
            // manually override the type with a sorttable_type attribute
            if (!headrow[i].className.match(/\bsorttable_nosort\b/)) { // skip this col
                mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);

                if (mtch) {
                    override = mtch[1];
                }

                if (mtch && typeof sorttable["sort_" + override] == 'function') {
                    headrow[i].sorttable_sortfunction = sorttable["sort_" + override];
                }
                else {
                    headrow[i].sorttable_sortfunction = sorttable.guessType(table, i);
                }
                // make it clickable to sort
                headrow[i].sorttable_columnindex = i;
                headrow[i].sorttable_tbody = table.tBodies[0];

                dean_addEvent(headrow[i], "click", function(e) {
                    if (this.className.search(/\bsorttable_sorted\b/) != -1) {
                        // if we're already sorted by this column, just 
                        // reverse the table, which is quicker
                        sorttable.reverse(this.sorttable_tbody);
                        this.className = this.className.replace('sorttable_sorted', 'sorttable_sorted_reverse');

                        return;
                    }

                    if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
                        // if we're already sorted by this column in reverse, just 
                        // re-reverse the table, which is quicker
                        sorttable.reverse(this.sorttable_tbody);
                        this.className = this.className.replace('sorttable_sorted_reverse', 'sorttable_sorted');

                        return;
                    }

                    // remove sorttable_sorted classes
                    theadrow = this.parentNode;
                    forEach(theadrow.childNodes, function(cell) {
                        if (cell.nodeType == 1) { // an element
                            cell.className = cell.className.replace('sorttable_sorted_reverse', '');
                            cell.className = cell.className.replace('sorttable_sorted', '');
                        }
                    });

                    this.className += ' sorttable_sorted';

                    // build an array to sort. This is a Schwartzian transform thing,
                    // i.e., we "decorate" each row with the actual sort key,
                    // sort based on the sort keys, and then put the rows back in order
                    // which is a lot faster because you only do getInnerText once per row
                    row_array = [];
                    col = this.sorttable_columnindex;
                    rows = this.sorttable_tbody.rows;

                    for (var j = 0; j < rows.length; j++) {
                        row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]];
                    }

                    /* If you want a stable sort, uncomment the following line */
                    //sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
                    /* and comment out this one */
                    row_array.sort(this.sorttable_sortfunction);
                    tb = this.sorttable_tbody;

                    for (var j = 0; j < row_array.length; j++) {
                        tb.appendChild(row_array[j][1]);
                    }

                    delete row_array;
                });
            }
        }
    },
    guessType: function(table, column) {
        // guess the type of a column based on its first non-blank row
        sortfn = sorttable.sort_alpha;

        for (var i = 0; i < table.tBodies[0].rows.length; i++) {
            text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);

            if (text != '') {
                text1 = text.replace(' РіСЂРЅ.', '');
                text2 = text.replace(' РіСЂРЅ', '');
                text3 = text.replace(' UAH', '');

                if (text.match(/^-?[Р?$В¤]?[\d,.]+%?$/) ||
                text1.match(/^-?[Р?$В¤]?[\d,.]+%?$/) ||
                text2.match(/^-?[Р?$В¤]?[\d,.]+%?$/) ||
                text3.match(/^-?[Р?$В¤]?[\d,.]+%?$/)) {
                    return sorttable.sort_numeric;
                }

                // check for a date: dd/mm/yyyy or dd/mm/yy 
                // can have / or . or - as separator
                // can be mm/dd as well
                possdate = text.match(sorttable.DATE_RE)

                if (possdate) {
                    // looks like a date
                    first = parseInt(possdate[1]);
                    second = parseInt(possdate[2]);

                    if (first > 12) {
                        // definitely dd/mm
                        return sorttable.sort_ddmm;
                    }
                    else if (second > 12) {
                        return sorttable.sort_mmdd;
                    }
                    else {
                        // looks like a date, but we can't tell which, so assume
                        // that it's dd/mm (English imperialism!) and keep looking
                        sortfn = sorttable.sort_ddmm;
                    }
                }
            }
        }

        return sortfn;
    },
    getInnerText: function(node) {
        // gets the text we want to use for sorting for a cell.
        // strips leading and trailing whitespace.
        // this is *not* a generic getInnerText function; it's special to sorttable.
        // for example, you can override the cell text with a customkey attribute.
        // it also gets .value for <input> fields.
        hasInputs = (typeof node.getElementsByTagName == 'function') &&
        node.getElementsByTagName('input').length;

        if (node.getAttribute("sorttable_customkey") != null) {
            return node.getAttribute("sorttable_customkey");
        }
        else if (typeof node.textContent != 'undefined' && !hasInputs) {
            return node.textContent.replace(/^\s+|\s+$/g, '');
        }
        else if (typeof node.innerText != 'undefined' && !hasInputs) {
            return node.innerText.replace(/^\s+|\s+$/g, '');
        }
        else if (typeof node.text != 'undefined' && !hasInputs) {
            return node.text.replace(/^\s+|\s+$/g, '');
        }
        else {
            switch (node.nodeType) {
                case 3:
                    if (node.nodeName.toLowerCase() == 'input') {
                        return node.value.replace(/^\s+|\s+$/g, '');
                    }
                case 4:
                    return node.nodeValue.replace(/^\s+|\s+$/g, '');
                    break;
                case 1:
                case 11:
                    var innerText = '';

                    for (var i = 0; i < node.childNodes.length; i++) {
                        innerText += sorttable.getInnerText(node.childNodes[i]);
                    }

                    return innerText.replace(/^\s+|\s+$/g, '');
                    break;
                default:
                    return '';
            }
        }
    },
    reverse: function(tbody) {
        // reverse the rows in a tbody
        newrows = [];

        for (var i = 0; i < tbody.rows.length; i++) {
            newrows[newrows.length] = tbody.rows[i];
        }

        for (var i = newrows.length - 1; i >= 0; i--) {
            tbody.appendChild(newrows[i]);
        }

        delete newrows;
    },

    /* sort functions
     each sort function takes two parameters, a and b
     you are comparing a[0] and b[0] */
    sort_numeric: function(a, b) {
        aa = parseFloat(a[0].replace(/[^0-9.-]/g, ''));

        if (isNaN(aa)) 
            aa = 0;
        bb = parseFloat(b[0].replace(/[^0-9.-]/g, ''));
        
        if (isNaN(bb)) 
            bb = 0;

        return aa - bb;
    },
    sort_alpha: function(a, b) {
        aa = a[0].toLowerCase();
        bb = b[0].toLowerCase();

        if (aa == bb) 
            return 0;

        if (aa < bb) 
            return -1;

        return 1;
    },
    sort_ddmm: function(a, b) {
        mtch = a[0].match(sorttable.DATE_RE);
        y = mtch[3];
        m = mtch[2];
        d = mtch[1];

        if (m.length == 1) 
            m = '0' + m;

        if (d.length == 1) 
            d = '0' + d;

        dt1 = y + m + d;
        mtch = b[0].match(sorttable.DATE_RE);
        y = mtch[3];
        m = mtch[2];
        d = mtch[1];

        if (m.length == 1) 
            m = '0' + m;

        if (d.length == 1) 
            d = '0' + d;

        dt2 = y + m + d;

        if (dt1 == dt2) 
            return 0;

        if (dt1 < dt2) 
            return -1;

        return 1;
    },
    sort_mmdd: function(a, b) {
        mtch = a[0].match(sorttable.DATE_RE);
        y = mtch[3];
        d = mtch[2];
        m = mtch[1];

        if (m.length == 1) 
            m = '0' + m;

        if (d.length == 1) 
            d = '0' + d;

        dt1 = y + m + d;
        mtch = b[0].match(sorttable.DATE_RE);
        y = mtch[3];
        d = mtch[2];
        m = mtch[1];

        if (m.length == 1) 
            m = '0' + m;

        if (d.length == 1) 
            d = '0' + d;

        dt2 = y + m + d;

        if (dt1 == dt2) 
            return 0;

        if (dt1 < dt2) 
            return -1;

        return 1;
    },
    shaker_sort: function(list, comp_func) {
        // A stable sort function to allow multi-level sorting of data
        // see: http://en.wikipedia.org/wiki/Cocktail_sort
        // thanks to Joseph Nahmias
        var b = 0;
        var t = list.length - 1;
        var swap = true;
        while (swap) {
            swap = false;
            for (var i = b; i < t; ++i) {
                if (comp_func(list[i], list[i + 1]) > 0) {
                    var q = list[i];
                    list[i] = list[i + 1];
                    list[i + 1] = q;
                    swap = true;
                }
            } // for
            t--;

            if (!swap) 
                break;

            for (var i = t; i > b; --i) {
                if (comp_func(list[i], list[i - 1]) < 0) {
                    var q = list[i];
                    list[i] = list[i - 1];
                    list[i - 1] = q;
                    swap = true;
                }
            } // for
            b++;
        } // while(swap)
    }
}

[ProFTP]

сохранить страницу и посмотреть - ниасилил чтоли? там всё есть:

та там дофига всего
можно ли это по проще сделать?

то есть там надо написать этот ява скрипт и такую таблицу....

Код: Выделить всё

<table class="data-table sortable" id="job-table">
<thead>
  <tr>
    <th class="vacancy">Вакансия</th>
    <th class="company">Компания</th>
    <th class="city sorttable">Город(а)</th>
    <th class="city sorttable">Технологии</th>
  <th class="date sorttable_ddmm">Дата</th>

  </tr>
</thead>
<tbody>
  <tr>
    <td>

я принцип работы не понял...

я не могу найти класс class="data-table sortable" это от явы...

этот скрипт который ты привел, это Аякс?
если у меня либа будет стоять? то этот скрипт не нужен?

если таблица по страницная, то нужно нажать на ссылку и оно передаст запрос в скрипт и выведит по другому, так как будет либа стоять и будет включен аякс, то странциа обновлятся полностью не будет, правильно?

как сделать чтобы по нажатию по строке в колонке вверху таблицы, был запрос в скрипт!!? как именно это сделанно?

[ProFTP]

а какой запрос? где url какие данные отправляються в скрипт, в СУБД?

ну чтобы отсортировать вытащить из СУБД и постранично сделать!!!

[zg]

де url какие данные отправляються в скрипт, в СУБД?

сортировка идёт либо на стороне клиента, либо на стороне сервера яваскрипт работает на стороне клиента, поэтому, если сортировка будет идти средствами яваскрипта, то запроса не будет.

[ProFTP]

я понял, ну если вывод идет по страничный, значит логично: чтобы перебрать и отортировать все данные?

как сделать чтобы по нажатию по строке в колонке вверху таблицы, был запрос в скрипт!!? как именно это сделанно?

[zg]

как именно это сделанно?

только через хттпквери ака аякс

[ProFTP]

стрелочка:

Код: Выделить всё

<td width="46%"><a href="/index.php?action=pm;f=inbox;start=0;sort=subject;desc;">Subject <img src="/Themes/default/images/sort_up.gif" alt="" /></a></td>

пример:

Код: Выделить всё

hr
{
border-top:1px ridge #CCCCCC; color:#CCCCCC; background-color:#CCCCCC; height:5 px; weight: 200 px;
}

Код: Выделить всё

<table width="100" height="50" border="1">
  <tr>
    <td width="100" height="50" align="center" bgcolor=#CCCCCC style="cursor:pointer" onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'" onClick="document.location='http://html.by/.html'">
    <a href="http://www.html.by/">LINK</a>
    </td>
  </tr>
</table>

по проще:

Код: Выделить всё

<table border='1'>
<tr>
<td width='500' style='cursor:hand' onClick="location='http://yandex.ru'">
Привет!
</td>
</tr>
</table> 

_http://evapco.ro/index.php