Laravel DataTables如何基于periode_start与periode_end实现两列日期范围过滤

你可以根据你的数据量选择下面两种方案实现： #

方案1：前端过滤（小数据量场景使用，无需修改后端） #

直接修改你现有的Datatables搜索扩展逻辑即可，核心逻辑是判断行的periode_start和periode_end与你选择的日期范围存在重叠，修改后的JS代码如下，注意替换代码里的列索引为你实际表格中对应列的索引：

$(document).ready( function(){
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex){
            var datepicker_to = $('#datepicker_to').datepicker("getDate");
            var datepicker_from = $('#datepicker_from').datepicker("getDate");
            // 请将下方的索引替换为你表格中periode_start和periode_end对应的实际列索引
            var periodeStart = new Date(data[21]);
            var periodeEnd = new Date(data[22]);

            // 没有选择日期时直接返回全部
            if (datepicker_from == null && datepicker_to == null) {return true; }
            // 只选了结束日期：行的开始日期<=选中的结束日期
            if (datepicker_from == null) { return periodeStart <= datepicker_to; }
            // 只选了开始日期：行的结束日期>=选中的开始日期
            if (datepicker_to == null) { return periodeEnd >= datepicker_from; }
            // 选了两个日期：两个时间段有重叠就符合条件
            return periodeStart <= datepicker_to && periodeEnd >= datepicker_from;
        }
    );

    $('#datepicker_from, #datepicker_to').change(function() {
        tableMediaOrder.draw();
    });
});

方案2：服务端过滤（大数据量场景推荐，性能更好） #

前端过滤在数据量超过千条时会有明显卡顿，推荐将过滤逻辑放到Laravel后端实现：

第一步：修改前端JS，传递日期参数到后端 #

// 初始化Datatables的时候添加ajax参数传递
var tableMediaOrder = $('#你的表格ID').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "你的接口地址",
        data: function (d) {
            d.date_from = $('#datepicker_from').val();
            d.date_to = $('#datepicker_to').val();
        }
    },
    // 你原来的其他Datatables配置保留
});

// 日期选择器变更时重绘表格
$('#datepicker_from, #datepicker_to').change(function() {
    tableMediaOrder.draw();
});

第二步：修改Laravel Controller代码 #

首先先修正你现有代码里的语法错误：原代码中$data = MediaOrder::memberOf(auth()->user()->group_id)->get();>>get('group_idUser'))->get();是冗余错误代码，先删除多余部分。再添加日期过滤逻辑：

public function index(Request $request)
{
    if ($request->ajax()) {
        // 先构造查询构造器，不要直接get()
        if(auth()->user()->is_admin){
            $query = MediaOrder::query();
        }else{
            $query = MediaOrder::memberOf(auth()->user()->group_id);
        }

        // 添加日期过滤逻辑
        if ($request->filled('date_from')) {
            $query->where('periode_end', '>=', $request->date_from);
        }
        if ($request->filled('date_to')) {
            $query->where('periode_start', '<=', $request->date_to);
        }

        // 最后获取数据
        $data = $query->get();

        return DataTables::of($data)
                ->addIndexColumn()
                ->addColumn('action',function($row){
                    $btn = '<a style="margin:5px" href="javascript:void(0)" id="viewMediaOrder" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="View" class="edit btn btn-primary btn-sm button1 viewMediaOrder" value="{{ csrf_token() }}"><i class="fa fa-eye mr-1"></i>View</a>';
                    if(!$row->isdisabled){
                        $btn = $btn.'<a style="margin:5px" href="javascript:void(0)" id="editMediaOrder" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="edit btn btn-warning btn-sm button1 editMediaOrder" value="{{ csrf_token() }}"><i class="fa fa-pencil mr-1"></i>Edit</a>
                        <a style="margin:5px" href="javascript:void(0)" data-toggle="tooltip" id="disableMediaOrder"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-danger btn-sm button1 disableMediaOrder" value="{{ csrf_token() }}"><i class="fa fa-power-off mr-1"></i>Disable</a>';
                    }
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
    } else {
        \Meta::set('title', 'Media Order');
        $groups = Group::all();
        $media_order = DB::table('media_order')->get();
        $moo = MediaOrder::get();
        $users = User::orderBy('name', 'asc')->get();
        return view('media-order.index')->with(compact('users','moo','groups'));
    }
}

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