在数据表中定义列类型以进行排序

Question

我按照这个数据表教程将表的第三列按百分比值排序：

// 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>

我尝试替换columnDefs为aoColumnDefs并关联columndef，如上面链接中的第二个示例所示。尽管如此，该列的排序功能仍然没有响应。我在这里错过了什么？

Answer 1

将“num-fmt”更改为“html-num-fmt”。现在应该可以了。

            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


        });