Laravel Yajra datatables rendering custom html / Spalte styling

Ich habe in einem fairen paar Tagen recherche datatables und yajra Paket, sagte, Dass, ich bin nicht näher zu bekommen die Ergebnisse, die ich brauche und wäre dankbar eine helfende hand auf diesen einen, wenn jemand mit mehr wissen als mein Novize Ansatz!

Helfen, besser zu erklären habe ich anbei zwei Bilder, das Erste Bild ist eine Anwendung, die bereits das umgesetzt, und die zweite ist eine schnelle mock-ich habe geworfen wurde, um den Unterschied zu zeigen.


Den gewünschten Erfolg, ich bin in der Hoffnung zu erreichen... Laravel Yajra datatables rendering custom html /Spalte styling


Der heutigen Sicht habe ich...Laravel Yajra datatables rendering custom html /Spalte styling


Ich bin im Grunde versucht, hinzufügen von benutzerdefinierten html, um jede Spalte, die verlangt, die Funktionalität.. ich habe es geschafft, zu erreichen, einige leichte Erfolg durch Rücksendung einer benutzerdefinierten array etwa so:

foreach ($tasks as $task) {
    $checkBox = '<div class="checkbox"><input type="checkbox" value="63"><label></label></div>';
    $taskPriority = '<span class="text-info inline-block">Medium</span>';
            ... so on ...
    $row = array(
        $checkBox,
        $taskPriority,
        ... so on ...
    );
    $rows[] = $row;
}
$list['data'] = $rows;
return $list;

Das funktioniert zwar, ich würde nicht sagen, das ist der beste Ansatz, und man stellt sich vor, es gibt einige, was eine bessere und elegantere Art und Weise, dies zu tun?

Verstehe ich yajra hat die addColumn und editColumn Methoden, die ich verwendet habe diese zum hinzufügen einer Spalte "Aktion" so, dass ist das einzige, das scheint zu Rendern html, andere Verfahren, andere als addColumn('action', 'blah blah') scheint nicht zu wollen das Rendern der html-und stattdessen zeigt es als unformatierten text in die Zeile ein.

Nur in diesem Fall ist, um jedem zu helfen, hier wird der Ajax-Aufruf gemacht, um die Daten der Tabelle.

$('#taskstable').DataTable({
    "processing": true,
    "retrieve": true,
    "serverSide": true,
    'paginate': true,
    'searchDelay': 700,
    "bDeferRender": true,
    "responsive": true,
    "autoWidth": false,
    "pageLength": 5,
    "lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
    ajax: '/tasks/get-tasks'
});

Hoffentlich kann mir jemand helfen, lindern den stress des seins ein Neuling! Danke.

InformationsquelleAutor Birdy | 2017-02-20
Schreibe einen Kommentar