ArtisanTinkerer.github.io by ArtisanTinkerer

Since I am currently learning Vue.js, I decided to create a component for Datatables. Obviously using Laravel.

I have seen other ways of doing this, but I want to be able to use the Datatables Editor.

Progress

I still have a lot to do, but the basics are working. Not really happy with the way I am doing the buttons, these need to be added based on the users permissions.

HTML:

    <div id="app">
        <ch-datatable  table-url="/widgetsTable" data-url="/widgetsAjax">    </ch-datatable>
    </div>```   
    
  Controller:

public function tableSetup() { $dt = new Datatable(“widgets”, “Widgets”);//table and panel title

    $dt->fieldTitles = array('Title', 'Description');
    $dt->dbFields = array('title', 'description');

    return $dt->createResponse();
}

public function datatablesAjax()
{
    global $db;//this is needed to get Datatables to work with Laravel

    $postData = $_POST;

    Editor::inst($db, 'widgets')
        ->fields(
            Field::inst("widgets.id"),
            Field::inst('widgets.title'),
            Field::inst("widgets.description")
        )
        ->process($postData)
        ->json();
} }

 
 

 
 My Datatables Class:

class Datatable { private $dbTable; private $panelTitle;

public $fieldTitles;
public $dbFields;

public function __construct($dbTable, $panelTitle)
{
    $this->dbTable = $dbTable;
    $this->panelTitle = $panelTitle;
}


public function createResponse()
{

    $arrResponse = array();

    $arrResponse['panelTitle'] = $this->panelTitle;
    $arrResponse['table'] = $this->dbTable;

    $arrEditorDescriptions = $this->fieldTitles;

    array_unshift($this->fieldTitles, ''); //first column is needed for the checkbox
    $arrTableHeaders = $this->fieldTitles;

    $arrTableColumns = $this->dbFields;


    //first lets set up the HTML table ---------------------------------------------------------------
    $arrResponse['tableHeaders'] = $arrTableHeaders;

    //now the editor fields----------------------------------------------------------------------------

    $numColumns = sizeof($arrEditorDescriptions);
    for ($field = 0; $field < $numColumns; $field++) {
        $arrResponse['editorFields'][] = ['label' => $arrEditorDescriptions[$field], 'name' => $arrResponse['table'] . '.' . $arrTableColumns[$field]];
    }

    //editor is done, now lets sort the table out------------------------------------------------------

    //this is the first one which is a checkbox for selecting
    $arrResponse['tableColumns'][] = ['data' => "null", 'className' => 'select-checkbox', 'orderable' => false, 'defaultContent' => ''];

    $numColumns = sizeof($arrTableColumns);
    for ($field = 0; $field < $numColumns; $field++) {
        $arrResponse['tableColumns'][] = ['data' => $arrResponse['table'] . '.' . $arrTableColumns[$field]];
    }

    return response()->json($arrResponse);
}

}

 I hate the way I am building these arrays to make the response.
 
 and here is the Vue component:

```