raj February 2016

Jquery data table need to show the blank records at bottom always (any sorting)

I am having table with mixed empty,non-empty values if i click the column name sorting will be done, i need blank records at bottom always if i click asc, desc sort what ever i click blank,empty records need to shown in bottom only what i want to do for that please help me any one.

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">   
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
    jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "non-empty-string-asc": function (str1, str2) {
        if(str1 == "")
           return 1;
        if(str2 == "")
           return -1;
           return ((str1 < str2) ? -1 : ((str1 > str2) ? 1 : 0));
    },                   
    "non-empty-string-desc": function (str1, str2) {
        if(str1 == "")
            return 1;
        if(str2 == "")
            return -1;
            return ((str1 < str2) ? 1 : ((str1 > str2) ? -1 : 0));
    }
    });
</script>
</head>
                <table id="example" class='dataTable fn dataTableExt oSort' border='1'>
                <thead>
                    <tr>
                        <th rowspan="2">Customer</th>
                        <th colspan="2">2016</th>
                        <th colspan="2">2015</th>
                    </tr>
                    <tr>
                        <th>Performance %</th> 
                        <th>Rank</th>
                        <th>Performance %</th> 
                        <th>Rank</th>
                    <tr>
                </thead>
                <tbody>
                    <tr>
                        <td>name1</td>
                    

Answers


Demonblack February 2016

You're checking if your string is == "".

Are you sure the empty strings aren't null? I would suggest this:

 jQuery.extend(jQuery.fn.dataTableExt.oSort, {
            "non-empty-string-asc": function(str1, str2) {
                if ( str1 == null || str1 == "")
                    return 1;
                if ( str2 == null || str2 == "")
                    return -1;
                return ((str1 < str2) ? -1 : ((str1 > str2) ? 1 : 0));
            },

            "non-empty-string-desc": function(str1, str2) {
                if ( str1 == null || str1 == "")
                    return 1;
                if ( str2 == null || str2 == "")
                    return -1;
                return ((str1 < str2) ? 1 : ((str1 > str2) ? -1 : 0));
            }
        });

Additionally, you're missing the jQuery and DataTable libraries.

Add this at the top of your body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

If you want the ordering to work for all columns, rather than just the name and rank columns, you need to change the targets in this:

            var dataTable = $('#example').dataTable({
                "iDisplayLength": 8, //Number of rows
                "bLengthChange": false, //Disable "show 1-n entries"
                bFilter: false, //Disable filter
                bInfo: false,
                columnDefs: [{ "type" : "non-empty-string",targets: [0,4] }],
                "order": [[ 1, "desc" ],[ 2, "asc" ]]
            });

With this:

            var dataTable = $('#example').dataTable({
                "iDisplayLength": 8, //Number of rows
                "bLengthChange": false, //Disable "show 1-n entries"
                bFilter:  

Post Status

Asked in February 2016
Viewed 2,643 times
Voted 4
Answered 1 times

Search




Leave an answer