InforTables

Dyanamic data fetching table with customizable filters and layout


InforTables@1.0.7.css
table.css

- 2023-10-23 08:32:33: Provide err_callback to infor_search

InforTables@1.0.7-min.css
table.css

- 2023-10-23 08:32:33: Provide err_callback to infor_search

InforTables@1.0.7.js
table.js

- 2023-10-23 08:32:33: Provide err_callback to infor_search

InforTables@1.0.7-min.js
table.js

- 2023-10-23 08:32:33: Provide err_callback to infor_search

InforTables@1.0.6.css
table.css

- 2023-10-23 08:16:00: InforSearch Error Handler

InforTables@1.0.6-min.css
table.css

- 2023-10-23 08:16:00: InforSearch Error Handler

InforTables@1.0.6.js
table.js

- 2023-10-23 08:16:00: InforSearch Error Handler

InforTables@1.0.6-min.js
table.js

- 2023-10-23 08:16:00: InforSearch Error Handler

InforTables@1.0.4.css
table.css

- 2023-10-16 08:24:26: Visual fix

InforTables@1.0.4-min.css
table.css

- 2023-10-16 08:24:26: Visual fix

InforTables@1.0.4.js
table.js

- 2023-10-16 08:24:26: Visual fix

InforTables@1.0.4-min.js
table.js

- 2023-10-16 08:24:26: Visual fix

InforTables@1.0.3.css
table.css

- 2023-10-16 08:17:55: ajax => _ajax + refresh()

InforTables@1.0.3-min.css
table.css

- 2023-10-16 08:17:55: ajax => _ajax + refresh()

InforTables@1.0.3.js
table.js

- 2023-10-16 08:17:55: ajax => _ajax + refresh()

InforTables@1.0.3-min.js
table.js

- 2023-10-16 08:17:55: ajax => _ajax + refresh()


Dependencies:
Geen dependencies gevonden

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>
        <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

Tag / Attribute Description Required
infor-table Table Container True
infor-table [id] Table identifier True
infor-table-filters Container for filter inputs False
infor-table-filter Table filter, any input can be placed inside False
infor-table-count Container for response count and loading dotd False
infor-table-count [data-single] Term for one response element, ex: 1 Project False
infor-table-count [data-multiple] Term for multiple or zero response elements, ex: 2 Projecten False
infor-table-pagination Ordering options container True
infor-table-order-option Ordering option False
infor-table-order-option [data-column] Ordering option value False
Infor-table-header Table header True

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 ],
})
Var Description
id Table ID
api Url to fetch data
response_records_name Name of the var inside response containing data. See the example below
search.api Infor-Search API Parameter
search.content Infor-Search content Parameter
search.sub_content Infor-Search sub_content Parameter
search.placeholder Infor-Search placeholder Parameter
errorHandler function which will handle potential errors
fillTable Function which takes a single record as parameter and generates and returns a table row. See the example below
execute Functions to execute after the table is initialized

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.

Variable Parameters Description
refresh() Refreshes the table