解决Datatable分页时获取下拉按钮对应ID失效的问题

问题根源 #

你当前的写法存在两个核心问题：

1. 违反HTML规范：多个元素使用了相同的id="deviceId"和id="deviceUnitId"，浏览器会将这些元素存入一个集合，但Datatable分页时，非当前页的DOM元素会被移除，导致集合索引在切换分页后重置。
2. 按钮ID是全局递增的（比如第二页从101开始），但集合索引从0重新计数，用按钮ID作为索引取值时必然不匹配。

方案一：用data属性存储数据（推荐） #

直接将数据绑定到按钮的data-*属性上，去掉冗余的隐藏输入框，逻辑更简洁。

修改后端视图代码 #

foreach (var item in Model.UvDevice)
{
    i++;
    <tr>
        <td hidden="hidden">@item.Id</td>
        <td>@i</td>
        <td>@item.Name</td>
        <td>
            <div class="btn-group dropdown">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    @item.UnitName
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" style="z-index:998; overflow: scroll; max-height: 180px; overflow-x: hidden" role="menu">
                    @foreach (var item2 in Model.Units)
                    {
                        <li>
                            <div type="button" style="z-index: 998" class="btn" onclick="changeDeviceUnit(this)" 
                                 data-device-id="@item.Id" 
                                 data-unit-id="@item2.UnitId">
                                @item2.UnitName
                            </div>
                        </li>
                        j++;
                    }
                </ul>
            </div>
        </td>

修改前端JS代码 #

通过按钮元素直接读取data属性的值：

function changeDeviceUnit(button) {
    // 原生JS读取方式
    var _deviceId = button.getAttribute('data-device-id');
    var _deviceUnitId = button.getAttribute('data-unit-id');

    // 或用jQuery简化写法
    // var _deviceId = $(button).data('device-id');
    // var _deviceUnitId = $(button).data('unit-id');

    var data = {
        unitId: _deviceUnitId,
        deviceId: _deviceId                
    };

    $.post("...", data, function (obj) {
        // 可选：更新下拉按钮显示文本，同步选择结果
        $(button).closest('.dropdown').find('.dropdown-toggle').text($(button).text());
    });
};

方案二：用class替代重复ID，通过按钮查找子元素 #

保留隐藏输入框，但将重复的id改为class，通过点击的按钮直接查找其内部的输入框。

修改后端视图代码 #

foreach (var item in Model.UvDevice)
{
    i++;
    <tr>
        <td hidden="hidden">@item.Id</td>
        <td>@i</td>
        <td>@item.Name</td>
        <td>
            <div class="btn-group dropdown">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    @item.UnitName
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" style="z-index:998; overflow: scroll; max-height: 180px; overflow-x: hidden" role="menu">
                    @foreach (var item2 in Model.Units)
                    {
                        <li>
                            <div type="button" style="z-index: 998" class="btn" onclick="changeDeviceUnit(this)" id="@j">
                                @item2.UnitName
                                <input class="deviceId" type="hidden" value="@item.Id" />
                                <input class="deviceUnitId" type="hidden" value="@item2.UnitId" />
                            </div>
                        </li>
                        j++;
                    }
                </ul>
            </div>
        </td>

修改前端JS代码 #

function changeDeviceUnit(button) {
    // 查找按钮内部的隐藏输入框取值
    var _deviceId = $(button).find('.deviceId').val();
    var _deviceUnitId = $(button).find('.deviceUnitId').val();

    var data = {
        unitId: _deviceUnitId,
        deviceId: _deviceId                
    };

    $.post("...", data, function (obj) {
        // 可选：更新下拉按钮显示文本
        $(button).closest('.dropdown').find('.dropdown-toggle').text($(button).text());
    });
};

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