簡體   English   中英

在jQuery中使用的表中的升序和降序

[英]Ascending and descending order in table using in jQuery

在jQuery中使用的表中的升序和降序,這是JavaScript文件。 錯誤是:

無法讀取未定義的屬性“ localeCompare”

請幫助我解決這個升序和降序。

function sortTable1() {
    $('th').click(function () {
        var table = $(this).parents('table').eq(0)
        var rows = table.find("tr:not(:has('th'))").toArray().sort(comparer($(this).index()))
        this.asc = !this.asc
        if (!this.asc) { rows = rows.reverse() }
        for (var i = 0; i < rows.length; i++) { table.append(rows[i]) }
    })
    function comparer(index) {
        return function (a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index)
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
        }
    }
    function getCellValue(row, index) { return $(row).children('td').eq(index).html() }

    // additional code to apply a filter
    $('table').each(function () {
        var table = $(this)
        var headers = table.find('th').length
        var filterrow = $('<tr>').insertAfter($(this).find('th:last()').parent())
        for (var i = 0; i < headers; i++) {
            filterrow.append($('<th>').append($('<input>').attr('type', 'text').keyup(function () {
                table.find('tr').show()
                filterrow.find('input[type=text]').each(function () {
                    var index = $(this).parent().index() + 1
                    var filter = $(this).val() != ''
                    $(this).toggleClass('filtered', filter)
                    if (filter) {
                        var el = 'td:nth-child(' + index + ')'
                        var criteria = ":contains('" + $(this).val() + "')"
                        table.find(el + ':not(' + criteria + ')').parent().hide()
                    }
                })
            })))
        }
        filterrow.append($('<th>').append($('<input>').attr('type', 'button').val('Clear Filter').click(function () {
            $(this).parent().parent().find('input[type=text]').val('').toggleClass('filtered', false)
            table.find('tr').show()
        })))
    })
}

這是表的結構:

<table id="test" class="master_table test_1 table no-border hover">
    <thead class="no-border">
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th class="sortable1">Name</th>
            <th class="text-center">Status</th>
            <th>Date</th>
            <th id="nm" class="text-center">Hrs</th>
        </tr>
    </thead>
</table>

您應該檢查空值

return function (a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index)
            if(valA != null && valB!=null)
             {
               return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
             }
             else{
              return 0;
             }
        }

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM