laravel8 datatables ajax分页前端渲染

孤单的时候狗作陪

已于 2022-03-06 20:58:16 修改

阅读量481

点赞数

分类专栏： laravel 文章标签： ajax jquery javascript

于 2022-02-27 21:49:39 首次发布

原文链接：https://www.codeleading.com/article/85156211783/

版权

laravel 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Laravel8中结合Datatables进行数据渲染和分页。首先，通过引入DataTables的CSS和JS库，然后创建HTML表格结构。接着，初始化Datatables并设置分页、排序和服务器模式。在后端，通过`datatables`方法处理请求，根据请求参数进行数据查询、排序和分页。同时，展示了如何添加自定义操作列，如删除按钮。最后，提供了一个获取删除按钮的方法。

摘要由CSDN通过智能技术生成

1.引入datatables css js cdn 链接

   <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
 
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

2.提前布局要展示的页面注意数据库查出的数据无需写html标签

<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>医生姓名</th>
        <th>医生照片</th>
        <td>院区</td>
        <td>职称</td>
        <td>科室</td>
        <td>简介</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

3.初始化datatables

<!--第三步：初始化Datatables-->
$(document).ready( function () {
    $('#table_id_example').DataTable({
        // 开启分页
        paging:true,
        order:[[0,'desc']],//默认排序，第一列倒序，order:[[0,'desc'],[1,'asc']]
        // scrollY:500,
        //每页显示条数
        lengthMenu:[3,5,7,10],
        //开启服务器模式
        serverSide: true,
 //但对序号为0列的列不进行排序，别的列均可进行排序
//后面是数组，可以是多列

"aoColumnDefs" : [ {  "bSortable" :  false ,  "aTargets" : [  1 , 2,3,4 ] }]  

        //后端请求
        ajax:{
            url:'{{route('admin.doctor.datatables')}}',
            type:'get'
        },
        //需要展示页面的数据
        columns:[
            {data:'id'},
            {data:'doctor_name'},
            {data:'doctor_img'},
            {data:'campus_id'},
            {data:'departmenthome_id'},
            {data:'doctor_position_id'},
            {data:'introduce'}, 
            {data:'btn'}

        ],
        language: {
       "sProcessing": "处理中...",
       "sLengthMenu": "显示 _MENU_ 项结果",
       "sZeroRecords": "没有匹配结果",
       "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
       "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
       "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
       "sInfoPostFix": "",
       "sSearch": "搜索:",
       "sUrl": "",
       "sEmptyTable": "表中数据为空",
       "sLoadingRecords": "载入中...",
       "sInfoThousands": ",",
       "oPaginate": {
           "sFirst": "首页",
           "sPrevious": "上页",
           "sNext": "下页",
           "sLast": "末页"
       },
       "oAria": {
           "sSortAscending": ": 以升序排列此列",
           "sSortDescending": ": 以降序排列此列"
       }
   }

       

    });
});

4.后端代码实现渲染分页

//datatables 渲染页面
public function datatables(Request $request)
{
    //查询数据库数据
    $data = DoctorModel::all();
        //排序
    $id = $request->get('columns')[0]['data'];//第几列，字段名
     $order = $request->get('order')[0]['dir'];//升序降序

    //记录总条数
    $total = $data->count();
    //分页开始的位置
    $start = $request->get('start');
    //分页结束的位置
    $length = $request->get('length');
    //接收要搜索的数据
    $search = $request->get('search',[]);
    //分页
    $data = DoctorModel::orderBy($id,$order)->offset($start)->limit($length)->get();
    //datatables 返回参数必选 一下四个
    $result = [
        'draw'=>$request->get('draw'),
        'recordsTotal'=>$total,
        'recordsFiltered'=>$total,
        'data'=>$data
    ];
    return $result;

}

5.访问题

 protected $appends = ['btn'];  
public function getBtnAttribute()
      {
          $id =$this->id;

          return "<a title='删除' href='javascript:;'onclick='admin_del($id,this)' class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'>&#xe6e2;</i></a>";

      }

原文转载自：laraval8 datatables 渲染页面分页 - 代码先锋网 (codeleading.com)