如何让路由器DHCP页面设备列表默认按IP地址排序？

核心思路 #

选择在randerBandlist函数中实现排序，而非getList：

• getList是通用数据获取接口，被randerBandlist和randerDevlist共同调用，在其中排序会干扰其他功能的数据顺序
• randerBandlist仅负责DHCP绑定列表的渲染，在此处排序不会影响其他模块，且逻辑更清晰

具体修改步骤 #

1. 添加IP排序辅助函数
   在ModelDhcpband的函数定义中，插入一个专门用于IP地址排序的工具函数（建议放在getList之前）：

// 按内网IP升序排序的辅助函数
sortByIp = function(a, b) {
    // 将IP字符串转为数字数组，避免字符串排序的逻辑错误（如192.168.1.10排在192.168.1.2之前）
    const ipA = a.ip.split('.').map(Number);
    const ipB = b.ip.split('.').map(Number);
    // 逐段比较IP的四个分段
    for (let i = 0; i < 4; i++) {
        if (ipA[i] !== ipB[i]) {
            return ipA[i] - ipB[i];
        }
    }
    return 0;
},

2. 修改randerBandlist函数实现排序
   在生成渲染数据之前，先对原始设备列表按IP排序，再循环生成模板数据：

randerBandlist = function( rsp ){
    var tpl = $( '#tplbandlist' ).html(),
        container = $( '#bandlist' ),
        bandlistdata = rsp.list,
        tpldata = [],
        mac, ip, dname;
    currentList = {};
    if ( bandlistdata.length > 0 ) {
        // 关键：对原始设备列表按IP升序排序
        bandlistdata.sort(sortByIp);
        for (var i = 0; i < bandlistdata.length; i++) {
            mac = bandlistdata[i].mac.toUpperCase();
            ip = bandlistdata[i].ip;
            dname = StringH.encode4Html( bandlistdata[i].name );
            tpldata.push({
                dname: dname,
                ip: ip,
                mac: mac
            });
            currentList[ip] = 1;
        }
    }
    container.html( tpl.tmpl( {bandlist: tpldata} ) );
},

替代方案（不修改原始数据） #

如果不想改动原始返回的bandlistdata，也可以在生成tpldata后直接对模板数据排序：

// 在randerBandlist函数的循环结束后、渲染前添加排序
tpldata.sort(function(a, b) {
    const ipA = a.ip.split('.').map(Number);
    const ipB = b.ip.split('.').map(Number);
    for (let i = 0; i < 4; i++) {
        if (ipA[i] !== ipB[i]) {
            return ipA[i] - ipB[i];
        }
    }
    return 0;
});

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