White White - 7 months ago 50
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

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