datables实现服务端分页并展示按钮传递ID值

datables实现服务端分页并展示按钮传递ID值

仙狐酱ღ 已于 2022-03-07 16:38:24 修改 102 收藏

文章标签： 前端 jquery database laravel

于 2022-03-07 00:12:06 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.youkuaiyun.com/Xian_Hu/article/details/123320321

版权

第一步

进行样式的引入样式操作

     
     

       
       

        
        

       
       
       
       

        
        

         
         <!--第一步：引入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>
        
        
       
       
     
     

第二步

引入 HTML 代码， tboy 中可有不用进行 foreach 循环操作

     
     

       
       

        
        

       
       
       
       

        
        

         
         <!--第二步：添加如下 HTML 代码-->
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
         <table id="table_id_example" class="display">
        
        
       
       

       
       

        
        

       
       
       
       

        
        
    
         
         <thead>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
    
         
         <tr>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
        
         
         <th>ID
         
         </th>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
        
         
         <th>姓名
         
         </th>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
        
         
         <th>年龄
         
         </th>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
        
         
         <td>性别
         
         </td>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
        
         
         <td>操作
         
         </td>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
    
         
         </tr>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
    
         
         </thead>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
    
         
         <tbody>
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        
    
         
         </tbody>
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
         </table>
        
        
       
       
     
     

第三步

进行 datables 的初始化操作

     
     

       
       

        
        

       
       
       
       

        
        

         
         $(document).ready( 
         
         function () {
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
             $(
         
         '#table_id_example').DataTable({
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 // 开启分页
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 paging:
         
         true,
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 // scrollY:500,
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 //每页显示条数
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 lengthMenu:[3,5,7,10],
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 //开启服务器模式
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 serverSide: 
         
         true,
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 //后端请求
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 ajax:{
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     url:
         
         '{{route('admin.doctor.datatables
         
         ')}}',
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         type:
         
         'get'
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 },
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 //需要展示页面的数据
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 columns:[
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     {data:
         
         'id'},
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     {data:
         
         'name'},
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     {data:
         
         'age'},
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     {data:
         
         'sex'},
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 ]
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
             });
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
         });
        
        
       
       
     
     

第四步

进行控制器的书写操作

     
     

       
       

        
        

       
       
       
       

        
        
        
         
         //判断是否是ajax
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        
        
         
         if (
         
         $request->ajax()) {
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         // 开启位置
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         $start = 
         
         $request->get(
         
         'start', 
         
         0);
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         // 获取记录数,健壮一点取最小值
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         $length = min(
         
         100, 
         
         $request->get(
         
         'length', 
         
         10));
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        
             
         
         // 获取数据
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         $data = Article::offset(
         
         $start)->limit(
         
         $length)->get();
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         //记录总数
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         $total = Article::count();
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         /*
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     draw: 客户端调用服务器端次数标识
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     recordsTotal: 获取数据记录总条数
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     recordsFiltered: 数据过滤后的总数量(和上面记录总数是一样的，无需理会)
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     data: 获得的具体数据
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     注意：recordsTotal和recordsFiltered都设置为记录的总条数
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     */
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         $result = [
        
        
       
       

       
       

        
        

       
       
       
       

        
        
                
         
         'draw' => 
         
         $request->get(
         
         'draw'),
        
        
       
       

       
       

        
        

       
       
       
       

        
        
                
         
         'recordsTotal' => 
         
         $total,
        
        
       
       

       
       

        
        

       
       
       
       

        
        
                
         
         'recordsFiltered' => 
         
         $total,
        
        
       
       

       
       

        
        

       
       
       
       

        
        
                
         
         'data' => 
         
         $data
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     ];
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         //返回数据
        
        
       
       

       
       

        
        

       
       
       
       

        
        
            
         
         return 
         
         $result;
        
        
       
       

       
       

        
        

       
       
       
       

        
        
 
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 }
        
        
       
       
     
     

第五步

模型层追加字段操作，展示出按钮的方式

并且传递出 ID 的操作，可以执行删除、修改等操作

     
     

       
       

        
        

       
       
       
       

        
        
    
         
         //另请别名
        
        
       
       

       
       

        
        

       
       
       
       

        
        
    
         
         protected 
         
         $appends=[
         
         'action'];
        
        
       
       

       
       

        
        

       
       
       
       

        
        
    
         
         public 
         
         function getActionAttribute()
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
             {
        
        
       
       

       
       

        
        

       
       
       
       

        
        
        
         
         return 
         
         '
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                     
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 //这个是详情的按钮，设置点击事件，并传递当前this，并指明ID数值
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 <button><a href="#" οnclick="xq(this,'.
         
         $this->id.
         
         ')">详情</a></button>
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
         
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 //这个是删除的按钮，设置点击事件，并传递当前this，并指明ID数值
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 <button><a href="#" οnclick="delete_btn(this,'.
         
         $this->id.
         
         ')">删除</a></button>
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
                 ';
        
        
       
       

       
       

        
        

       
       
       
       

        
        

         
             }
        
        
       
       
     
     

第六步

到达前端，并且去调用去使用它

使用 action 调用模型层的按钮 

使用 function 可以调用模型层设置点击事件名称 

</article>