README

HTML

<infor-table id="projecten_table">

    <infor-table-filters>

        <infor-table-filter>
            <label>Adres</label>
            <infor-search id="adres" class="form-control" name="adres" placeholder="Selecteer adres" data-content="straat, huisnummer,toevoeging" data-sub-content="plaats" data-api="api/search/adres"></infor-search>
        </infor-table-filter>

        <infor-table-filter>
            <label>Status</label>
            <infor-select-search id="status" name="status" class="form-control" placeholder="Selecteer status">
                <infor-select-option data-name="Actielijst" data-value="actielijst">Actielijst</infor-select-option>
                <infor-select-option data-name="Lopend" data-value="lopend">Lopend</infor-select-option>
            </infor-select-search>
        </infor-table-filter>

    </infor-table-filters>

    <infor-table-count data-single="Project" data-multiple="Projecten"></infor-table-count>

    <infor-table-pagination data-sort="ASC" >
        <infor-table-order-option data-column="projectnummer">Projectnummer</infor-table-order-option>
        <infor-table-order-option data-column="opdrachtnummer">Opdrachtnummer</infor-table-order-option>
    </infor-table-pagination>

    <infor-table-header>Projectnummer</infor-table-header>
    <infor-table-header>Adres</infor-table-header>
    <infor-table-header>Plaats</infor-table-header>
    <infor-table-header>Stap</infor-table-header>

</infor-table>

Options

Initialization

initInforTables({
  id: 'projecten_table',
  api: `/api/projecten/get`,
  response_records_name: 'projecten',
  search: {
    api: 'api/search/project',
    content: 'projectnummer',
    sub_content: `opdrachtnummer`,
    placeholder: `Zoeken...`,
  },
  errorHandler: handleAjaxErrors,
  fillRecord: fillRecord,
  execute: [ tippyInit ],
})

Examples

//Data fetch server side 

$model = new Adressen();

//Table will post ids of the selected records using the search functionality.
if(isset($request->ids)){
    $model = $model->whereIn('id', $request->ids);
}

//Table will post page & per_page based on the pagination values
$all_ids = $model->pluck('id')->toArray();
if(isset($request->per_page) && isset($request->page)){
    $model->skip($request->per_page * ($request->page - 1))->take($request->per_page);
}
$adressen = $model->get();

//Table need the following records:
//Addresen ( Name of the record is provided during the initialization, response_records_name )
//current_ids: ids of currently returned records ( based on pagination )
//all_ids: ids of all records ( including records not returned because of the selected page )
return response([
    'adressen' => $adressen,
    'all_ids' => $all_ids ?? [],
    'current_ids' => $current_ids ?? [],
], 200);

//Fill fillRecord() Example
function fillRecord(record) {
    const {id, complexnummer} = record;

    return `<tr>
                <td>${id}</td>
                <td>${complexnummer || ''}</td>
            </tr>`
  }

Instance

Use _inforTables.get(id) to get the instance. Instance mostly includes defined DOM elements and data pointers.