如何使用wenzhixin插件在bootstrap table中适配Laravel分页返回数据

• 路由请求方法与Bootstrap Table默认请求方法不匹配：你配置的路由是POST类型，Bootstrap Table默认用GET请求拉取data-url数据
• 分页字段映射不匹配：Bootstrap Table默认要求列表数据放在rows字段、总记录数放在total字段，而Laravel分页器默认把列表放在data字段、总记录数放在total字段，字段对应不上导致无法识别数据

方案1：前端调整配置（推荐，无侵入不改动后端逻辑） #

直接修改Bootstrap Table的初始化配置，自定义字段映射和请求方法即可，不需要改后端代码：

如果你用data-*属性初始化表格： #

<table
  data-url="/student-statement"
  data-method="post" <!-- 匹配后端POST路由 -->
  data-pagination="true"
  data-data-field="data" <!-- 指定列表数据从返回的data字段取 -->
  data-total-field="total" <!-- 指定总记录数从返回的total字段取 -->
  data-page-size="10" <!-- 和后端paginate(10)的参数保持一致 -->
>
  <!-- 你的列配置 -->
</table>

如果你用JS初始化表格： #

$('#your-table-id').bootstrapTable({
  url: '/student-statement',
  method: 'post',
  pagination: true,
  dataField: 'data',
  totalField: 'total',
  pageSize: 10
  // 其他原有配置保持不变
})

方案2：后端调整返回结构（适合项目需要统一接口响应格式的场景） #

你也可以在后端把Laravel分页结果改成Bootstrap Table默认要求的结构，不需要改前端配置：
修改后的控制器index方法代码：

public function index(){
    $expenses = DB::table('students')
        ->join('statements', 'students.id', '=', 'student_id')
        ->select('student_id', 'students.name', 'tuition', 'graduation', 'other',
            DB::raw('format(tuition+graduation+other,0) as total,
            (students.payback/100)*(tuition+graduation+other) as payback'),
            'paid')
        ->addSelect(DB::raw('(students.payback/100)*(tuition+graduation+other)-paid as balance'))
        ->paginate(10);

    return response()->json([
        'rows' => $expenses->items(),
        'total' => $expenses->total()
    ]);
}

注意：你原有控制器代码的addSelect部分漏写了乘号运算符，原代码(students.payback/100)(tuition+graduation+other)-paid as balance会触发SQL语法错误，上述修正后的代码已经补全了乘号。

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