numerical sort

plw · February 2021

<script type="text/javascript">         
        $(document).ready(function () { 
        $("#DTable").dataTable({ 
            "pageLength": 30,
                "lengthMenu": [ 10, 25, 30, 50, 75, 100 ],
                "bFilter": false,
                "aaSorting": [[ 0, 'asc' ]],
                "aoColumns": [ 
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": true },  
                    { "bSortable": true },  
                    { "bSortable": true },                      
                ]
            });
        });         
    </script>

How do I get the first and third columns to sort numerically please - thanks

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin · February 2021

If they're numeric, that would happen automatically. If not, it would suggest a non-numeric value is in one of the cells.

If that doesn't help resolve it, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

plw · February 2021

This is part of the html. I can't send you a link I am afraid as you would need to log in. I am getting ID I then 10 then 2

'''

    <script src="../../js/DataTables-1.9.4/media/js/jquery.js" type="text/javascript"></script>
    <link href="/js/DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="/js/DataTables-1.9.4/media/js/jquery.dataTables.min.js" type="text/javascript"></script>

        <script type="text/javascript">         
           $(document).ready(function () { 
               $("#DTable").dataTable({ 
                   "pageLength": 30,
                   "lengthMenu": [ 10, 25, 30, 50, 75, 100 ],
                   "bFilter": false,
                   "aaSorting": [[ 0, 'asc' ]],
                   "aoColumns": [ 
                       { "bSortable": true },
                       { "bSortable": true },   
                       { "bSortable": false }
                   ]
               });
           });          
        </script>

The table looks like

<

table id="DTable" border="0" width="100%" cellspacing="0" cellpadding="4">
<thead>
<tr>
<td bgcolor="#F2F2F2" style="width: 2px">
<h3>ID</h3>
</td>
<td bgcolor="#F2F2F2" style="width: 821px">
<h3>Question</h3>
</td>
<td bgcolor="#F2F2F2" width="150">
<h3>Status</h3>
</td>
</tr>
</thead>

                                                    <tr>
                                                        <td style="width: 2px">
                                                            <h3>                                                
                                                                <a href="details.asp?FaqID=1" target="_top">1</a>
                                                            </h3>
                                                        </td>
                                                        <td style="width: 821px">
                                                            <h3>
                                                                hello THERE1
                                                            </h3>
                                                        </td>
                                                        <td>
                                                            <form method="post" name="StatusForm" id="StatusForm">
                                                                <select name="Active" id="Active" size="1" onChange='JavaScript: $("#StatusForm").submit();'>
                                                                    <option value="">- select -</option>
                                                                    <option selected value="1">Activate</option>
                                                                    <option  value="0">De-Activate</option> 
                                                                </select>
                                                                <input type="hidden" name="FaqID" id="FaqID" value="1">
                                                                <input type="hidden" name="Search1" id="Search1" value="Any">
                                                                <input type="hidden" name="Criteria" id="Criteria" value="">
                                                                <input type="hidden" name="Search" id="Search" value="Search">
                                                            </form>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td style="width: 2px">
                                                            <h3>                                                
                                                                <a href="details.asp?FaqID=2" target="_top">2</a>
                                                            </h3>
                                                        </td>
                                                        <td style="width: 821px">
                                                            <h3>
                                                                1<br />1<br />1<br />1<br />1<br />1
                                                            </h3>
                                                        </td>
                                                        <td>
                                                            <form method="post" name="StatusForm" id="StatusForm">
                                                                <select name="Active" id="Active" size="1" onChange='JavaScript: $("#StatusForm").submit();'>
                                                                    <option value="">- select -</option>
                                                                    <option selected value="1">Activate</option>
                                                                    <option  value="0">De-Activate</option> 
                                                                </select>
                                                                <input type="hidden" name="FaqID" id="FaqID" value="2">
                                                                <input type="hidden" name="Search1" id="Search1" value="Any">
                                                                <input type="hidden" name="Criteria" id="Criteria" value="">
                                                                <input type="hidden" name="Search" id="Search" value="Search">
                                                            </form>
                                                        </td>
                                                    </tr>

plw · February 2021

AH is it because there is an

<

h3> and an <a>. How do I get round that?

kthorngren · February 2021

Checkout the Natural sorring plugin. It can remove the HTML for sorting purposes.

Kevin

plw · February 2021

I will try that now - thanks

plw · February 2021

Aha That worked if I used the latest version of Datatables - thanks

numerical sort

numerical sort

Answers

Howdy, Stranger!

Categories

DataTables

numerical sort

numerical sort

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables