defining column type in Datatables for sorting

Question

I am following this Datatbles tutorial to sort the third column of my table as percent value:

// Setup column search - add a text input to each footer cell
            $('#p_table-id tfoot th').each(function() {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });

            // DataTable
            var table = $('#p_table-id').DataTable({
                "columnDefs": [{
                    "type": "num-fmt",
                    "targets": 2
                }],
                dom: 'l Brtip',
                "aLengthMenu": [
                    [20, 50, 100, -1],
                    [20, 50, 100, "All"]
                ],
                "buttons": [],
                paging: false,
                fixedHeader: true


            });
            // Apply the search
            table.columns().every(function() {
                var that = this;

                $('input', this.footer()).on('keyup change', function() {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
        });

 tfoot {
            display: table-header-group;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.13/af-2.1.3/b-1.2.4/datatables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.13/af-2.1.3/b-1.2.4/datatables.min.js"></script>
<img id="loader" src="/static/img/loader_animation_large.gif" style="
    		width:36px; 
    		height:36px; 
    		display: none;
    		position:absolute; 
    		top:50%;
    		left:50%;
    		margin-top:-18px;
    		margin-left:-18px;" />
    <p><a href="/accounts/logout/">Logout</a> | <a href="/accounts/profile/">Home</a></p>

    <div id="title">
        <b style="font-size:200%" ;>Optimize proxies<br></b>
    </div>
    <div id="proxy_history_dialog" title="Proxy history" style="display:none;">
    </div>
    <table id='p_table-id' class="display" cellspacing="0" width="50%">
        <thead>
            <tr>

                <th>Site name</th>

                <th>Site id</th>

                <th>Extraction rate</th>

                <th>Proxy</th>

                <th>Proxy duration</th>

                <th>Proxy history</th>

            </tr>
        </thead>
        <tfoot>
            <tr>

                <th>Site name</th>

                <th>Site id</th>

                <th>Extraction rate</th>

                <th>Proxy</th>

                <th>Proxy duration</th>

                <th>Proxy history</th>

            </tr>
        </tfoot>
        <tbody>

            <tr>

                <td><span>target.com</span></td>

                <td><span>-106</span></td>

                <td><span>67.8%</span></td>

                <td><span>shader_us</span></td>

                <td><span>219 days</span></td>

                <td>
                    <button id="-106" class="get-proxy-history">history</button>
                </td>
            </tr>

            <tr>

                <td><span>walmart.com</span></td>

                <td><span>-105</span></td>

                <td><span>86.6%</span></td>

                <td><span>trusted proxies</span></td>

                <td><span>433 days</span></td>

                <td>
                    <button id="-105" class="get-proxy-history">history</button>
                </td>
            </tr>

            <tr>

                <td><span>bestonix</span></td>

                <td><span>-104</span></td>

                <td><span>93.3%</span></td>

                <td><span>shader_us</span></td>

                <td><span>226 days</span></td>

                <td>
                    <button id="-104" class="get-proxy-history">history</button>
                </td>
            </tr>

        </tbody>
    </table>

I tried to replace columnDefs with aoColumnDefs and to associate the columndef as in second example in the link above. Still, the sorting functionality for this column is not responding. What am I missing out here?

Yigit Yuksel · Accepted Answer · 2017-01-18 08:08:03Z

5

Change "num-fmt" to "html-num-fmt". It should work now.

            var table = $('#p_table-id').DataTable({
            "columnDefs": [
                {"type": "html-num-fmt", "targets": 2}
            ],
            dom: 'l Brtip',
            "aLengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]],
            "buttons": [],
            paging: false,
            fixedHeader: true


        });

answered Jan 18, 2017 at 8:08

Yigit Yuksel

1,2002 gold badges21 silver badges36 bronze badges

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

Comments

Deven Shah · Accepted Answer · 2017-01-18 08:12:28Z

0

Since the percentage sign is at the end the sorting should work normally without any extra format definition. I remove the column defs and the sorting works. Here is the plunk you can try on https://plnkr.co/edit/E5CtRwqxVBSqjQTOdc3B?p=preview

var table = $('#p_table-id').DataTable({
            dom: 'l Brtip',
            "aLengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]],
            "buttons": [],
            paging: false,
            fixedHeader: true
        });

answered Jan 18, 2017 at 8:12

Deven Shah

4323 silver badges5 bronze badges

2 Comments

Max Segal Over a year ago

this way the sorting will be as string meaning '22%'<'9%'

Max Segal Over a year ago

You are right in this case but I would like to make it explicit.

Collectives™ on Stack Overflow

defining column type in Datatables for sorting

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related