Table

Download Table Module
Version 1.5

The Table module is used to optimize and reduce the development time of the Tables. For utilization of the Table module, the below pattern is needed. 

var table = new Table(model, jTarget, pd, options);
table.render();

Parameters Type Description
model Object As we explained in the model section, we store data in model.json. Then in this module, we write the exact path of data.
jTarget Object In this section, we write the jquery path of where we want the table to be shown.
data / cioPath String In this section, we enter the data or path of the data in CloadIO. data is obtained from filling out the form. If we want to cache the data, we use the data. cioPath is the path in CloadIO where the data is stored. So when we want to get data from CloadIO directly we use the cioPath.
options Object Optional. Options are for the customization of the module. For that purpose, in the table module, we have some events and options that we will explain how you can use. If don't need to customization the table, you can remove the last argument.

options: There are several important events in the option argument that we use each one to custom our table.

Parameters Type Description
pageCapacity Number The first option is pageCapacity, This section is used when we want to show limited rows of tables per page.
paginationSize Number The next option is paginationSize, this section is used when we want to custom the numbers of paginations on every page. It means we can define a limitation number for table pagination. For instance, if we want pagination numbers 3 per page, we should write the 3 for this option. Otherwise, this number is 10 by default. It means if you don't set the paginationSize you will have 10 paginations number per page.
id String It is used to add a key for each created table, in order to table customization and save data.
showCount Boolean The next option is showCount, this option is used when we want to show the numbers of table rows per page. You can set it true if you want to show the numbers of table rows.
sort Boolean This option shows the arranging and sorting of the rows of tables according to fields.
filter Object This is for searching or filtering the table fields according to requirements. it has two options. If we add true it means the filter is enabled. If we add a primaries object for the filter, so it means according to some fields we should have a default filter in the table. For example for a table that includes a list of users, we want this table to be filtered by the specific date, so in primaries, we should add this field by the filter that we want.
join Object Another option is the join, this is used when we want to join two or more tables with each other. join has 5 properties:

  • from: The goal table which we want to join their fields with the current table.

  • localField: For merging tables, we need a common key. The common key in the current table is localField.

  • foreignField: As we mentioned, for merging tables, we need a common key. The common key in the other table is foreignField.

  • as: It is a prefix for another table fields.

  • project: The list of fields that we want after merge be shown for us in the table.

  • model: The model of another table.
buttons Object This option is used for add and handles buttons that you want to add to table rows.
beforeRecordRendered Function This event is used when we want to custom records before the table be rendered. This has three arguments, which the first argument refers to key of the record, the second argument refers torecord properties and the third argument refers to buttons. You can customize the buttons in the table. For example, you can remove or edit buttons.
onRecordRendered Function The next event is onRecordRendered, this is used when we want to custom table records when the table is rendered. This has three arguments, the first argument refers to key of the record, the second argument refers to record properties and the third part is the jQuery path of the table that we want to render it.
onRecordsReceived Function This is used when the records of the table are received and ready to use. This has one argument, which refers to records of the table that we want to render it.
onFilterValidated Function The next event is onFilterValidated, this event is used when the validation of the filter is done, and we can custom or handle the validated result.
onRendered Function This event is onRendered, it is used when the table is rendering. This has no parameter.

Example

To have the table module add the following code in index.html. 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css"> 
    </head>
    <body>
        <div class="page home"> 
            <div class="tableWrapper"><div> 
        </div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/table/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
</html>

Then add the following codes in the home.js.

pageCapacity 

new Table(app.local.model.common.client, $('.page.home > .tableWrapper'), '/example/' + app.auth.user.key, {
    pageCapacity: 10
}).render();

paginationSize 

new Table(app.local.model.common.client, $('.page.home > .tableWrapper'), '/example/' + app.auth.user.key, {
    pageCapacity: 10,
    paginatonSize: 3
}).render();

showCount 

new Table(app.local.model.common.client, $('.page.home > .tableWrapper'), '/example/' + app.auth.user.key, {
    pageCapacity: 10,
    paginatonSize: 3,
    showCount: true
}).render();

id 

new Table('edit', app.local.model.common.client, $('.page.home > .tableWrapper'), null, '/example/' + app.auth.user.key, {
    id: 'example'
}).render();

sort 

new Table('edit', app.local.model.common.client, $('.page.home > .tableWrapper'), null, '/example/' + app.auth.user.key, {
    sort: true
}).render();

filter 

new Table('edit', app.local.model.common.client, $('.page.home > .tableWrapper'), null, '/example/' + app.auth.user.key, {
    filter: true
}).render();
new Table('edit', app.local.model.common.client, $('.page.home > .tableWrapper'), null, '/example/' + app.auth.user.key, {
    filter: {
        primaries: {
            createdAt: app.now()
        }
    }
}).render();

join We want to join tableA and tableB by the commonField of these two tables. Our current table is tableA. 

new Table('edit', app.local.model.common.tableA, $('.page.home > .tableWrapper'), null, '/example/' + app.auth.user.key, {
    join: {
        from: 'tableB',
        localField: 'commoField',
        foreignField: 'commonField',
        as: 'tableB',
        project: {
            fieldKeyA: true,
            fieldKeyB: true
        },
        model: app.local.model.common.tableB
    }
}).render();

beforeRecordRendered 

new Table(app.local.model.common.client, $('.page.home > .tableWrapper'), '/example/' + app.auth.user.key, {
    beforeRecordRendered: function (recordKey, record, buttons) {
        if (!record.required)
            delete buttons.edit;
    }
}).render();

onRecordRendered 

new Table(app.local.model.common.client, $('.page.home > .tableWrapper'), '/example/' + app.auth.user.key, {
    onRecordRendered: function (recordKey, record, jRecord) {
        // you can customize your record here
    }
}).render();

onRecordsReceived 

new Table(app.local.model.common.client, $('.page.home > .tableWrapper'), '/example/' + app.auth.user.key, {
    onRecordsReceived: function (records) {
        app.local.myData = records;
    }
}).render();

onFilterValidated 

new Table('edit', app.local.model.common.client, $('.page.home > .tableWrapper'), null, 'example' + app.auth.user.key, {
    onFilterValidated: function (filter) {
        // you can customize your field here
    }
}).render();

onRendered 

new Table('edit', app.local.model.common.client, $('.page.home > .tableWrapper'), null, '/example/' + app.auth.user.key, {
    onRendered: function () {
        // you can customize your field here
    }
}).render();

Notice

Notice that you can use all of the events and options in your codes together.