Laravel项目如何将karyawans表全量数据展示到DataTable组件

1. 修正Karyawan控制器代码 #

原有代码存在两处问题：

• 错误调用了first()方法，只会拿到第一条员工数据再调用后续方法，不是查询全表
• 用了paginate(10)做后端分页，只会返回10条数据，需改成get()获取全量数据
  修改后的daftar_karyawan方法如下：

public function daftar_karyawan()
{
    return view('karyawans', [
        // 无需后端分页和原有搜索逻辑，直接返回全量排序后的数据
        "karyawans" => Karyawan::orderBy('id', 'asc')->get()
    ]);
}

104条数据量很小，直接交给前端DataTable自带的搜索、排序、分页功能处理即可，不需要额外写后端逻辑，如果需要保留原有后端过滤逻辑可以自行保留filter调用部分。

2. 修正全局布局文件的JS引入错误 #

当前DataTable的JS标签同时写了src属性和内部初始化代码，浏览器会直接忽略内部的初始化逻辑，必须拆成两个独立的script标签：

<!-- 先引入DataTable JS文件 -->
<script type="text/javascript" src="{{ asset('//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js') }}"></script>
<!-- 单独写初始化代码 -->
<script>
    $(document).ready(function() {
      $('#datatable').DataTable({
          // 可根据需求自定义配置，比如默认分页条数、提示语言等
          "pageLength": 10,
          "language": {
              "search": "搜索：",
              "paginate": {
                  "previous": "上一页",
                  "next": "下一页"
              }
          }
      });
    });
</script>

3. 修正Blade视图的冗余标签 #

当前Blade代码里，闭合row的</div>之后多了一个多余的</table>标签，会导致DOM结构异常，DataTable无法正确识别表格结构，直接删掉这个冗余标签即可。

完成以上三处修改后刷新页面，即可正常加载全量104条数据，正常使用DataTable自带的搜索、排序、分页功能。

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