numerical sort

numerical sort

plwplw Posts: 34Questions: 13Answers: 0
edited February 2021 in Free community support
<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.

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • plwplw Posts: 34Questions: 13Answers: 0
    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>
    
  • plwplw Posts: 34Questions: 13Answers: 0

    AH is it because there is an

    <

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

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

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

    Kevin

  • plwplw Posts: 34Questions: 13Answers: 0

    I will try that now - thanks

  • plwplw Posts: 34Questions: 13Answers: 0

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

This discussion has been closed.