Laravel-datatables: Benötigen Sie einen benutzerdefinierten Dropdown-Filter.

Erstellt am 25. Okt. 2017  ·  12Kommentare  ·  Quelle: yajra/laravel-datatables

Zusammenfassung des Problems oder der Funktionsanforderung


Ich benötige den Datenfilter mit benutzerdefiniertem Dropdown. Ich habe die Daten, die jetzt in guter Form angezeigt werden. Ich benötige ein benutzerdefiniertes Dropdown-Menü im Header, um Daten nach Dropdown-Wert zu filtern. [Hinweis: Ich muss diesen Dropdown-Wert für den Filter in der Laravel-Abfrage angeben. Dies ist ein benutzerdefinierter Wert, daher muss ich die Daten mit diesem benutzerdefinierten Wert filtern.]

Code-Snippet des Problems

Dieser Code funktioniert für den Standardfilter, aber ich habe das Dropdown-Menü mit jquery hinzugefügt, sodass ich diesen Wert in der Laravel-Abfrage übergeben muss, um die Daten zu filtern.

$(function () {
    var t = $('#user').DataTable({
        order: [[ 0, 'desc' ]],
        processing: true,
        serverSide: true,
        ajax: {
            url: '{!! route('datatables.data') !!}',
            data: function(d) {
                d.name = $('input[name=name]').val();
                d.email = $('input[name=email]').val();
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'arrival_date', name: 'arrival_date', orderable: true, searchable: true },
            { data: 'pick_up', name: 'pick_up', orderable: true, searchable: true },
            { data: 'destination', name: 'destination', orderable: true, searchable: true},
            { data: 'trekking_start_date', name: 'trekking_start_date', orderable: true, searchable: true},

            { data: 'trekking_end_date', name: 'trekking_end_date', orderable: true, searchable: true},
            { data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
});

$(document).ready(function() {
    $('<label style="margin-left: 10px;">Filter by ' +
        '<select class="form-control input-sm">'+
            '<option value="volvo">Completed Trip</option>'+
            '<option value="saab">Upcoming Trip</option>'+
        '</select>' + 
        '</label>').appendTo("#user_wrapper #user_length");
});

Und mein Abfragecode in Laravel

public function getClients(Request $request)
    {
        if($request->ajax()) {
            return Datatables::of(DB::select(DB::Raw('SELECT * FROM users WHERE id NOT IN (SELECT user_id FROM role_user) ORDER BY users.id DESC')))
                    //}))
                    ->addColumn('arrival_date', function($user){
                        if(isset(Helper::getFlightsByClientID($user->id)->arrival_date)) {
                            return date('M j, Y', strtotime(Helper::getFlightsByClientID($user->id)->arrival_date));
                        } else {
                            return 'N/A';
                        }
                    })
                    ->addColumn('pick_up', function($user){
                        if(isset(Helper::getFlightsByClientID($user->id)->pick_up)) {
                            return Helper::getFlightsByClientID($user->id)->pick_up == 1 ? 'Yes' : 'No'; 
                        } else {
                            return 'N/A';
                        }
                    })
                    ->addColumn('destination', function($user){
                        if(isset(Helper::getTreksByClientID($user->id)->trekking_region_id)) {
                            return Helper::getTrekByID(Helper::getTreksByClientID($user->id)->trekking_region_id)->name; 
                        } else {
                            return 'N/A';
                        }
                    })
                    ->addColumn('trekking_start_date', function($user){
                        if(isset(Helper::getTreksByClientID($user->id)->trekking_start_date)) {
                            return date('M j, Y', strtotime(Helper::getTreksByClientID($user->id)->trekking_start_date));
                        } else {
                            return 'N/A';
                        }
                    })
                    ->addColumn('trekking_end_date', function($user){
                        if(isset(Helper::getTreksByClientID($user->id)->trekking_end_date)) {
                            return date('M j, Y', strtotime(Helper::getTreksByClientID($user->id)->trekking_end_date));
                        } else {
                            return 'N/A';
                        }
                    })
                    ->addColumn('action', function($user){
                        $html = '';
                        $html .= '<a class="btn bg-green btn-flat btn-xs" href="'.route('user.clients.edit', $user->id).'">Edit</a>';

                        if(auth()->user()->hasRole('superadmin')) {
                            $html .= ' <a onclick="if(!confirm(\'Are u sure to delete?\')) return false;" class="btn bg-red btn-flat btn-xs" href="'.route('user.clients.delete', $user->id).'">Delete</a>';
                        }

                        return $html;

                    })
                    ->make(true);
        } else {
            abort(400, 'Bad Request.');
        }
    }

Fügen Sie gegebenenfalls eine Kopie Ihres Codes bei, die den vermuteten Fehler auslöst. Sie können die Markdown-PHP-Code-Tags verwenden, um Ihre Einfügung zu formatieren: md5-29f7d4c1ff52f0e396b313bfe2550e56

Systemdetails

Bitte geben Sie diese Angaben zu Ihrem System an! Wenn sie weggelassen werden, wird das Ticket gegenüber den Anforderungen / Tickets anderer Benutzer priorisiert.
  • Betriebssystem Ubuntu 16.04
  • PHP Version 7.0.22
  • Laravel Version 5.4
  • Laravel-Datatables Version 1.10.16

Screenshot

question

Hilfreichster Kommentar

Sie müssen das Zeichnen auslösen, wenn der Filter gewechselt wird. Vielleicht so etwas wie:

<select class="form-control input-sm" id="custom-filter" onchange="$('#user').DataTable().draw()">

Außerdem verwenden Sie die Sammlung. Konvertieren

DB::select(DB::Raw('SELECT * FROM users WHERE id NOT IN (SELECT user_id FROM role_user) ORDER BY users.id DESC'))

Zu so etwas wie:

DB::table('users')->whereNot(...);

Alle 12 Kommentare

@shankhadevpadam Sie können dies auf zahlreiche Arten tun. Ich übergebe den Abfrage-Generator jedoch vor Datentabellen auf der Serverseite.


$model = new Example();
$model->where('column_to_filter','=',$this->request->get('filter_by'));

return datatables()->eloquent($model);

Sie können natürlich bedingte IFs durchführen.


$model = new Example();

if($this->request->has('name')) {
     $model->where('name','=','predefined value');
}

return datatables()->eloquent($model);

Wenn Sie das obige Beispiel nicht ausführen möchten, können Sie sich auf die Dokumente beziehen. Nachspaltensuche , benutzerdefinierter Filter

Meine Frage ist, wie man ein Dropdown-Menü wie im obigen Bild bindet. Ich habe es über eine benutzerdefinierte Abfrage gebunden, aber ich muss es mit der Datentabelle binden. Dieser Wert sollte verfügbar sein, wenn das Dropdown-Menü geändert wird. [Bitte schauen Sie in mein Code-Snippet]

Fügen Sie id in das Auswahlfeld ein.

<select class="form-control input-sm" id="custom-filter">

Fügen Sie es dann in die Anforderungsparameter ein.

        ajax: {
            url: '{!! route('datatables.data') !!}',
            data: function(d) {
                d.name = $('input[name=name]').val();
                d.email = $('input[name=email]').val();
                d.filter = $('#custom-filter').val();
            }
        },

Führen Sie dann den erforderlichen Filter auf der Serverseite aus.

if ($filter = request('filter')) {
    $query->where('filter', $filter);
}

Sie müssen das Zeichnen auslösen, wenn der Filter gewechselt wird. Vielleicht so etwas wie:

<select class="form-control input-sm" id="custom-filter" onchange="$('#user').DataTable().draw()">

Außerdem verwenden Sie die Sammlung. Konvertieren

DB::select(DB::Raw('SELECT * FROM users WHERE id NOT IN (SELECT user_id FROM role_user) ORDER BY users.id DESC'))

Zu so etwas wie:

DB::table('users')->whereNot(...);

Danke jetzt arbeiten.

Willkommen, vergessen Sie nicht, das Projekt zu markieren, wenn Sie es nützlich finden. :) Vielen Dank!

Das Dropdown funktioniert einwandfrei, aber die Datenanzeige nach der Wertänderung in der Dropdown-Liste ist nicht korrekt.

Screenshot

Sie möchten nach gefiltertem Datum bestellen? Sie müssen dies auf der Ebene js tun. Oder setzen Sie die Standardreihenfolge auf diese Spalte.

Ja, bitte ein Beispiel.

Ich habe kein Beispiel. Siehe offizielle js api docs https://datatables.net/reference/api/ für ref. Der Trick besteht darin, einen manuellen Befehl js order auszuführen, bevor die Funktion zum erneuten Zeichnen von Tabellen ausgeführt wird.

@yajra Wie implementiere

            data: function(d) {
                d.name = $('input[name=name]').val();
                d.email = $('input[name=email]').val();
                d.filter = $('#custom-filter').val();
            }

@sistemaswebbrasil mit minifiedAjax() :

$script = '
data.name = $('input[name=name]').val();
data.email = $('input[name=email]').val();
data.filter = $('#custom-filter').val();
';

return $this
            ->builder()
            ...
            ->minifiedAjax($url = '', $script = null, $data = [])
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen