White White - 1 year ago 111
Javascript Question

Ascending and descending order in table using in jQuery

Ascending and descending order in table using in jQuery, here is the JavaScript file. The error is:


Cannot read property 'localeCompare' of undefined


Please help me solve this ascending and descending order.

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()
})))
})
}


Here is the table structure:

<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>

Answer Source

You should check for null values

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;
             }
        }