Laravel切换按钮值设置/修改及状态筛选异常问题求助

问题根源 #

你遇到的筛选失效问题，是因为Bootstrap Toggle插件会自动生成包含Pending和Approved两个文本的DOM结构，导致你通过$(row.find('td')[f]).text()读取状态列内容时，会同时获取到两个状态文本（比如PendingApproved），自然无法匹配单一状态的筛选条件。

解决方案 #

方案1：添加隐藏元素存储真实状态文本（推荐） #

在状态列的<td>中新增一个隐藏的<span>，专门存储当前的状态文本，筛选时读取这个隐藏元素的内容，而不是直接读取<td>的文本。

1. 修改视图中的状态列代码

<td>
  <input data-id="{{$college->id}}" class="toggle-class" type="checkbox" data-onstyle="danger"        
         data-offstyle="info" data-toggle="toggle" 
         data-on="Pending" data-off="Approved" {{$college->status?'checked':''}}>
  <!-- 新增隐藏span，存储当前状态文本 -->
  <span class="status-text" style="display: none;">{{$college->status ? 'Pending' : 'Approved'}}</span>
</td>

2. 更新Toggle切换事件，同步隐藏元素内容

当状态切换时，更新隐藏<span>的文本，保证和当前状态一致：

$('.toggle-class').change(function() {
    var status = $(this).prop('checked') == true ? 1 : 0;
    var id = $(this).data('id');
    // 同步状态文本到隐藏span
    var statusText = status === 1 ? 'Pending' : 'Approved';
    $(this).siblings('.status-text').text(statusText);

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/changeStatus",
        data: {
            'status': status,
            'id': id
        },
        success: function(data) {
            console.log(data.success)
        }
    });
})

3. 修改筛选脚本，读取隐藏元素的文本

把筛选时读取列内容的逻辑，改成读取隐藏的.status-text文本：

// 替换原代码中的 var col = $(row.find('td')[f]).text();
var col = $(row.find('td')[f]).find('.status-text').text();

方案2：直接从Toggle组件获取当前状态 #

如果不想新增DOM元素，可以直接通过Toggle组件的checked属性判断当前状态，生成对应的文本：

修改筛选脚本中的applyNewFilters函数：

function applyNewFilters() {
  console.log(filters);
  var rows = $('#myTable').find('tr');
  // 先显示所有行
  rows.slice(1).show();
  
  rows.slice(2).each(function() {
    var row = $(this);
    for(var f = 0; f < filters.length; f++) {
      var col;
      var td = $(row.find('td')[f]);
      // 假设状态列是第4列（索引为3，根据你的实际列位置调整）
      if(f === 3) {
          var toggle = td.find('.toggle-class');
          col = toggle.prop('checked') ? 'Pending' : 'Approved';
      } else {
          col = td.text();
      }
      
      console.log(col);
      if(col.indexOf(filters[f]) < 0) {
        row.hide();
        break; // 只要有一个筛选不匹配，直接隐藏该行
      }
    }
  });
}

额外优化：简化控制器状态切换逻辑 #

你的控制器代码可以简化，直接对状态取反，同时注意类型匹配（如果数据库中status是整数类型，建议用===判断）：

public function changeStatus(Request $request)
{
    $college = College::findOrFail($request->id);
    // 直接取反状态值，更简洁
    $college->status = $college->status === 1 ? 0 : 1;
    $college->save();

    return response()->json(['success' => 'Status changed successfully.']);
}

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