laravel实现DataTable搜索+排序+分页

首先引入DataTable和Jquery

 

 

仅供参考~

<script>

    // <!--第三步：初始化Datatables-->
    $(document).ready( function () {
      var datatable=$('#table_id_example').DataTable({
            "serverSide": true,
            "ajax": "{{route('exhibition')}}",
            //创建行回调，根据td的内容给td添加样式
            // 这里就是把td里面的数据加了一个标签，方便我等一下找到他的元素
            "createdRow":function(row,data,index){
                // addClassName(data.rank_cur_fs,10,row);
                // addClassName(data.rank_fs_1,11,row);
                $('td',row).eq(0).html('').append('<span  ids="'+data.id+'">'+data.name+'</span>');
            },
            "columns": [

                {"data": "name"},
                {"data": "text"},
            ]
        });
        //即点即改
        datatable.on("click",".sorting_1",function(){
            var content = $(this).children('span').text(); //获取到当前点击对象的值
            // 获取到要修改的id
            var pid = $(this).children('span').attr('ids');  //通过attr 获取到设置的属性（pid）
            console.log(pid)
            //当点击修改文字时 变成文本框并且获取到原值（content）
            $(this).parent().html("<input type='text' class='fo' value='" + content + "'/>");
            $(".fo").focus(); //光标
            $(".fo").blur(function(){
                //获取到修改后的值
                var val = $(".fo").val();
                //
                /*
                将所有修改信息传到后端
                 */
                // 发送ajax传递到后端修改数据
                var _token = "{{csrf_token()}}"
                $.ajax({
                    type: "POST",
                    // 这是修改后端数据的地址，你得改一下现在到这个修改的地址了
                    url: "{{route('updates')}}",
                    data: {
                        val:val,
                        id:pid,
                        _token

                    },
                    success: function(msg){
                        console.log(msg)
                        if(msg.code==200){
                            $(this).parent().html("<span class='up' style='cursor:pointer;'>"+val+"</span>");
                            location.reload()
                        }else{
                            alert('修改的内容不能跟原内容一样')
                        }
                    }
                });

            })
        })
    } );
    // //addClassName函数
    // // 这个函数是我百度搜的，好像是给返回的数据里面加上一个属性
    // function addClassName(data,i,row){
    //     switch(data){
    //         case 'Sell':
    //             $('td',row).eq(i).attr('class','Sell');
    //             break;
    //         case 'Buy':
    //             $('td',row).eq(i).attr('class','Buy');
    //             break;
    //         case 'Hold':
    //             $('td',row).eq(i).attr('class','Hold');
    //             break;
    //         case 'Marketperform':
    //             $('td',row).eq(i).attr('class','Marketperform');
    //             break;
    //         case 'Outperform':
    //             $('td',row).eq(i).attr('class','Outperform');
    //             break;
    //         case 'Underperform':
    //             $('td',row).eq(i).attr('class','Underperform');
    //             break;
    //         default:
    //             break;
    //     }
    // }
</script>

　　

 

 

  public function exhibition(Request $request)
    {

        $start = $request->get('start');//起始位置
        $length = $request->get('length');//长度
        $search = $request->get('search')['value'];//搜索
        //获取排序信息数组
        $orderArr = $request->get('order')[0];
        // 排序索引
        $column = $orderArr['column'];
        // 排序类型 升还是降
        $dir = $orderArr['dir'];
        // 排序字段
        $orderField = $request->get('columns')[$column]['data'];
        $data = \App\Models\Show::where('name','like',"%$search%")->offset($start)->limit($length)
            ->orderBy($orderField,$dir)
            ->get();

        foreach ($data as $v){
            $v['name'] = str_replace($search,"<span style='color: red'>$search</span>",$v['name']);
        }
//        Redis::set('user_key',$data);
//        if(Redis::exists('user_key')){
//            $values = Redis::get('name');
//        }
        return ['code'=>200,'msg'=>'ok','data'=>$data];
    }
//即点
    public function updates()
    {
        return  ？？？？？
    }