解决jQuery DataTables对Django Model Choices的排序异常问题

你遇到的问题是因为Django模型里status字段存储的是字符串类型的数字，jQuery DataTables默认按字符串规则排序，导致"10"、"11"排在"2"前面。以下是几种可行的修复方案：

方案1：利用DataTables的data-order属性（最简单的前端处理） #

直接在模板的<td>标签中添加data-order属性，传入数字类型的状态值，让DataTables以此作为排序依据：

修改模板中的表格内容：

<table id="actionTable" class="table table-striped">
    <thead>
        <tr>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        {% for action in actions %}
            <tr>
                <!-- 通过add:0将字符串转为数字，作为排序依据 -->
                <td data-order="{{ action.status|add:0 }}">{{ action.get_status_display }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

不需要修改JavaScript代码，DataTables会自动读取data-order中的数值进行正确的数字排序。

方案2：修改DataTables列的排序规则（前端JS配置） #

如果不想改动模板结构，可以在DataTables初始化时指定该列的排序类型为数字，并自定义排序时提取的值：

修改模板中的JavaScript代码：

$(document).ready(function () {
    $('#actionTable').DataTable({
        fixedHeader: false,
        paging: false,
        searching: false,
        info: false,
        language: {
            zeroRecords: "No action",
        },
        columnDefs: [
            {
                targets: 0, // 对应第一列（索引从0开始）
                type: 'num',
                render: function(data, type, row) {
                    // 排序时提取隐藏的数字字符串并转为数字
                    if (type === 'sort') {
                        return parseInt($(row[0]).find('span').text(), 10);
                    }
                    return data;
                }
            }
        ]
    });
});

方案3：修改Django模型字段类型（后端根本解决） #

如果业务允许，将status字段从CharField改为IntegerField，这样存储的就是数字类型，天然支持正确排序：

修改模型代码：

class Action(models.Model):
    STATUS_CHOICES = (
        (1, 'Status 1'),
        (2, 'Status 2'),
        (3, 'Status 3'),
        (4, 'Status 4'),
        (5, 'Status 5'),
        (6, 'Status 6'),
        (7, 'Status 7'),
        (8, 'Status 8'),
        (9, 'Status 9'),
        (10, 'Status 10'),
        (11, 'Status 11'),
        (12, 'Status 12'),
    )
    status = models.IntegerField(choices=STATUS_CHOICES, default=1, verbose_name='Status')

之后生成并执行数据库迁移：

python manage.py makemigrations
python manage.py migrate

模板中的代码可以简化，无需隐藏span：

<td>{{ action.get_status_display }}</td>

内容的提问来源于stack exchange，提问作者vaemps