javascript - defining column type in Datatables for sorting - Stack Overflow

admin管理员组

文章数量:1404580

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=".0.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href=".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=".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</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</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 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./ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/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/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.</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.</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?

• javascript
• jquery
• datatables

Share Improve this question Follow edited Jan 18, 2017 at 9:37 Sibeesh Venu 21.9k1717 gold badges115115 silver badges152152 bronze badges asked Jan 18, 2017 at 8:00 Max SegalMax Segal 2,05522 gold badges2727 silver badges5656 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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


        });

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
        });

本文标签： javascriptdefining column type in Datatables for sortingStack Overflow