Jquery Datatable sorting

Question

I'm noob with Jquery DataTables. I have a very basic question on how to use the sorting plugins: Have googled a lot on this, but I fail to get proper answers, on how to incorporate them in my code, do we have to just add the script to a ".js" file and add it? or Do we also have to call the function of the plugins?

Can someone point me to a working example with sorting of numeric columns formatted with commas/percentage signs.

The columns with signs or commas are sorted as string. I have seen a lot of references which say to use plugins and then specify sType or sSortableDataType but that doesn't work.

Here's my code: (Please correct me where I'm wrong)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="scorecard_dynamic.aspx.cs" Inherits="Dashboard_scorecard_dynamic" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>new score card</title>
    <%--<script src="../js/jquery-1.10.2.min.js"></script>--%>

    <style type="text/css" title="currentStyle">
        @import "../js/datatable/css/demo_page.css";
        @import "../js/datatable/css/demo_table.css";
    </style>
    <script type="text/javascript" src="../js/datatable/js/jquery.js"></script>
    <script type="text/javascript" src="../js/datatable/js/jquery.dataTables.js"></script>

    <script src="../js/datatable/Plugins-master/sorting/custom-data-source/percent.js"></script>

    <link href="../StyleSheet/LoadingPanel.css" rel="stylesheet" />

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function () {


            gettopchannelsplot();
            //transpose();           
           var otable = $('#example').dataTable({
                "iDisplayLength": 5,

                "aLengthMenu": [[1, 2, 3, 4, 5], [1, 2, 3, 4, "All"]],
                "oLanguage": {
                    "oPaginate": {
                        "sPrevious": "Previous", //can change text for pagination
                        "sNext": "Next"
                    },
                    //"fnDrawCallback": function (oSettings) {
                    //    alert('DataTables has redrawn the table');
                    //},
                    "aoColumns": [
                            null,                    
                            { "sType": "pct" },
                            null,
                            null,
                            null,
                            null,
                            null,
                            null
                    ],
                    "aoColumnDefs": [
                          { "bSortable": false, "aTargets": [ 0,5,6,7 ] }                     
                    ]
                }
                //"sPaginationType": "full_numbers"
            });
           oTable.fnSort([[3, 'asc']]);
        });
        var StartDate = '16-oct-2013';
        var EndDate = '22-oct-2013';
        function transpose() {
            var t = $('#example tbody').eq(0);
            var r = t.find('tr');
            var cols = r.length;
            var rows = r.eq(0).find('td').length;
            var cell, next, tem, i = 0;
            var tb = $('<tbody></tbody>');

            while (i < rows) {
                cell = 0;
                tem = $('<tr></tr>');
                while (cell < cols) {
                    next = r.eq(cell++).find('td').eq(0);
                    tem.append(next);
                }
                tb.append(tem);
                ++i;
            }
            $('#example').append(tb);
            $('#example').show();
        }
        function gettopchannelsplot() {
            //$("#bubbling").show();
            //alert('gettopchannelsplot');
            var arrListMain = new Array();
            var arrList = new Array();
            var linkName = 'View Chatter';

            var result = ExecuteSynchronously('../SocialMedia.asmx', 'GetTopchannels', { startDate: StartDate, endDate: EndDate });


            //tbl_example.empty();
            $('#example thead').append("<tr>"
                +"<td class='normalBold' align='left'>info</td>"
                + "<td class='normalBold' align='left'>share of voice</td>"
                + "<td class='normalBold' align='left'>total chatter</td>"
                + "<td class='normalBold' align='left'>sentiments</td>"
                + "<td class='normalBold' align='left'>exposure</td>"
                + "<td class='normalBold' align='left'>most popular with</td>"
                + "<td class='normalBold' align='left'>most popular on</td>"
                + "<td class='normalBold' align='left'>link</td>"
                + "</tr>");

            var value = new Array();
            if (result.d != "" && result.d != null) {
                arrListMain = result.d.split('#');

                for (var i = 0; i < arrListMain.length; i++) {
                    var tmp = "<tr>"
                    + "<td class='border' width='12%'><a href='../Scorecard.aspx?1'><image src='" + "../" + arrListMain[i].split('^')[7] + "'/></a></td>"
                    + " <td class='border' width='12%' align='center'>" + arrListMain[i].split('^')[2] + "%</td>"
                    + " <td class='border' width='12%' align='center'> " + arrListMain[i].split('^')[3] + "</td>"
////                + " <td class='border' width='12%' align='center'><label id=label" + i + " >" + Number(arrListMain[i].split('^')[3]).toLocaleString() + "</label></td>"
                    + " <td class='border' width='12%' align='center'><image src='" + "../" + arrListMain[i].split('^')[10] + "'/></td>"
                    + " <td class='border' width='13%' align='center'>" + arrListMain[i].split('^')[5] + "</td>"
                    + " <td class='border' width='13%' align='center'><image src='" + "../" + arrListMain[i].split('^')[8] + "'/></td>"
                    + " <td class='border' width='13%' align='center'><image src='" + "../" + arrListMain[i].split('^')[9] + "'/></td>"
                    + " <td class='border' width='13%' align='center'><a href='../ChatterAdvanced2.aspx?filter=channel&value=" + arrListMain[i].split('^')[0] + "'>chatter</a></td>"
                    + "</tr>";
                    //alert(tmp);
                    $('#example tbody').append(tmp);
                }

            }
            $("#bubbling").hide();
        }

    </script>
    <script type="text/javascript">

        function ExecuteSynchronously(url, method, args) {
            var executor = new Sys.Net.XMLHttpSyncExecutor(); // Instantiate a WebRequest.
            var request = new Sys.Net.WebRequest(); // Set the request URL.
            request.set_url(url + '/' + method); // Set the request verb.
            request.set_httpVerb('POST'); // Set request header.
            request.get_headers()['Content-Type'] = 'application/json; charset=utf-8'; // Set the executor.
            request.set_executor(executor); // Serialize argumente into a JSON string.
            request.set_body(Sys.Serialization.JavaScriptSerializer.serialize(args)); // Execute the request.
            request.invoke();
            if (executor.get_responseAvailable()) {
                return (executor.get_object());
            }
            return (false);
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <AjaxToolkit:ToolkitScriptManager runat="server" ID="ASD">
            <Scripts>
                <asp:ScriptReference Path="~/js/XMLHttpSyncExecutor.js" ScriptMode="Release" />
                <asp:ScriptReference Path="~/App_Code/SocialMedia.cs" />
            </Scripts>
        </AjaxToolkit:ToolkitScriptManager>
        <div>

            <div class="bubblingG" id="bubbling">
                <span id="bubblingG_1"></span>
                <span id="bubblingG_2"></span>
                <span id="bubblingG_3"></span>
            </div>
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                <thead>                       
                </thead>
                <tbody>
                </tbody>                   
            </table>
        </div>
    </form>
</body>
</html>

Please excuse my HTML markup formatting.

davidkonrad · Accepted Answer · 2013-12-10 13:46:30Z

1

You need both the "plugin" and set the proper sType according to that plugin. The plugins are really just some very simple functions, that you easily can produce yourself for your own needs and place into your code. Consider this "plugin" that sort percents with commas :

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "normalize": function(n) {
         return parseFloat(n.toString().replace(',','.'));
    },
    "percent-asc": function(a, b) {
        a=this.normalize(a);  
        b=this.normalize(b);
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "percent-desc": function(a, b) {
        a=this.normalize(a);  
        b=this.normalize(b);
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

The above is pretty failsafe. To initialize :

var dataTable = $('#example').dataTable({
   aoColumns: [ 
       null,
       null,
       null,
        { sType: "percent" },
       null
   ],
   //...
});

see this working fiddle demonstrating the code above -> http://jsfiddle.net/xK7Ud/

answered Dec 10, 2013 at 13:46

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavitar Over a year ago

perfect! I found my silly mistake which was a syntax error,I had an extra closing curly bracket..thanks :)

Collectives™ on Stack Overflow

Jquery Datatable sorting

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related