zoiaTable Demo

zoiaTable is the AJAX-driven dynamic HTML table powered by jQuery. It allows you to display table data with pagination, filtering and sorting.

This demo uses static data (e.g. there is no server processing for sorting and filtering), therefore it doesn't cover all features provided. You may take a look at the Zoia project which is actively using zoiaTable at the Backend side.

Basic usage

Below is the basic minimal usage example.

Name	E-mail

HTML code for table:


<table class="za-table za-table-divider za-table-striped za-table-hover za-table-responsive za-table-middle" id="table1">
    <thead>
        <tr>
            <th id="table1_name">name</th>
            <th id="table1_email">E-mail</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div class="table1Pagination za-margin-top noselect"></div>

JavaScript:


$('#table1').zoiaTable({
    url: '/your/data/source',
    limit: 5,
    fields: {
        name: {
            sortable: false,
            process: (id, item, value) => {
                return value;
            }
        },
        email: {
            sortable: false,
            process: (id, item, value) => {
                return value;
            }
        }
    }
});

You may also add client-side value processing and checkboxes like this:

	Name	E-mail	Status

HTML code for table:


<table class="za-table za-table-divider za-table-striped za-table-hover za-table-responsive za-table-middle" id="table2">
    <thead>
        <tr>
            <th id="table2ID" class="za-table-shrink"></th>
            <th id="table2_name">name</th>
            <th id="table2_email">E-mail</th>
            <th id="table2_status">Status</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div class="table2Pagination za-margin-top noselect"></div>

JavaScript:


$('#table2').zoiaTable({
    url: '/your/data/source',
    limit: 5,
    fields: {
        name: {
            sortable: false,
            process: (id, item, value) => {
                return value;
            }
        },
        email: {
            sortable: false,
            process: (id, item, value) => {
                return value;
            }
        },
        status: {
            sortable: false,
            process: (id, item, value) => {
                switch (value) {
                    case 0:
                        return 'Disabled';
                    case 1:
                        return 'Active';
                    case 2:
                        return 'Administrator';
                    default:
                        return '–';
                }
            }
        }
    }
});

zoiaTable Demo

Basic usage

Filtering by Value