laravel yajratable - 隐藏列但使其可搜索

Posted 2023-05-09

【中文标题】laravel yajratable - 隐藏列但使其可搜索

【英文标题】：laravel yajratable - hide column but make it searchable

【发布时间】：2022-01-06 03:14:59

【问题描述】：

我有以下代码：

视图表：

<div class="d-flex justify-content-center" style="padding:0px; margin-left: -58px">
    <table id="all" class="table table-bordered yajra-datatable">
        <thead>
        <tr>

            <th>First Name</th>
            <th>Last Name</th>
            <th>Team</th>
            <th>Email</th>
            <th>CC</th>
            <th>Skills</th>
            <th>Team</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

控制器

            public function getEmployees_all()
        

           $data = DB::table('employees')->select('first_name', 'last_name','email','name_abb_mappings.cc','name_abb_mappings.team', 'skills', 'file')
               ->leftJoin('name_abb_mappings','employees.abbreviation','=','name_abb_mappings.id')
               ->get();

            $data11 = Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('download', function ($data) 
                    return ' <form action="'.route('download').'" method="post" enctype="multipart/form-data"> '.@csrf_field().'  <button type="submit" class="btn btn-outline-secondary" style="color:orangered" name="downloadProfile" value= "'.$data->file.'">
                <svg xmlns="http://www.w3.org/2000/svg"   fill="currentColor" class="bi bi-file-pdf" viewBox="0 0 16 16">
                <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"></path>
                <path d="M4.603 12.087a.81.81 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.68 7.68 0 0 1 1.482-.645 19.701 19.701 0 0 0 1.062-2.227 7.269 7.269 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.187-.012.395-.047.614-.084.51-.27 1.134-.52 1.794a10.954 10.954 0 0 0 .98 1.686 5.753 5.753 0 0 1 1.334.05c.364.065.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.856.856 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.716 5.716 0 0 1-.911-.95 11.642 11.642 0 0 0-1.997.406 11.311 11.311 0 0 1-1.021 1.51c-.29.35-.608.655-.926.787a.793.793 0 0 1-.58.029zm1.379-1.901c-.166.076-.32.156-.459.238-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361.01.022.02.036.026.044a.27.27 0 0 0 .035-.012c.137-.056.355-.235.635-.572a8.18 8.18 0 0 0 .45-.606zm1.64-1.33a12.647 12.647 0 0 1 1.01-.193 11.666 11.666 0 0 1-.51-.858 20.741 20.741 0 0 1-.5 1.05zm2.446.45c.15.162.296.3.435.41.24.19.407.253.498.256a.107.107 0 0 0 .07-.015.307.307 0 0 0 .094-.125.436.436 0 0 0 .059-.2.095.095 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a3.881 3.881 0 0 0-.612-.053zM8.078 5.8a6.7 6.7 0 0 0 .2-.828c.031-.188.043-.343.038-.465a.613.613 0 0 0-.032-.198.517.517 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822.024.111.054.227.09.346z"></path>
                </svg>
              </button>
              </form>';

                )

                ->rawColumns(['download'])
                ->make(true);

            return $data11;

路线

   Route::GET('employee/all', [EmployeeController::class, 'getEmployees_all'])->name('employees.all');

jQuery

$(function () 
   var table = $('#all').DataTable(
        order: [[1, "desc"]],
        processing: true,
        serverSide: true,
         ajax: "route('employees.all') ",
        columns: [

            data: 'first_name', name: 'first_name',
            data: 'last_name', name: 'last_name',
            data: 'team', name: 'team',
            data: 'email', name: 'email',
            data: 'cc', name: 'cc',
            data: 'skills', name: 'skills',
            data: 'team', name: 'team',

            
                data: 'download',
                name: 'download',
                orderable: true,
                searchable: true
            ,


        ]
    );
);

到目前为止，该表正在工作。

我的问题：

我需要将“技能”列隐藏但可在数据表搜索框中搜索。 如果我只是用 display:none 之类的 CSS 隐藏列，那么表格会在以下方面被破坏 列以某种方式向左移动，并且条目位于错误的列中。 但是它不是那样工作的。有没有其他方法可以做到这一点。我希望我能正确地解释它。

提前致谢。

【参考方案1】：

不是特别复杂：

data: 'skills', name: 'skills', searchable : true, visible: false,

将隐藏该列但使其可搜索。