API and features description - GigaTables/gigatables GitHub Wiki

Overview of GigaTables API and features

Basic knowledge

To create simple instance of GigaTables one should create javascript (with lniked JQuery of course) like:

        $('#gigatable').GigaTable({
          struct: {// all in
            search: ['top', 'bottom'],
            rowsSelector: ['asc', 'top', 'bottom'],
            pagination: ['bottom']
          },
          ajax: 'gigatables.php',
          columns: [
            {data: "id"},
            {data: "desc"},
            {data: "title"},
            {data: "date"},
            {data: "types"},
            {data: "info"}
          ]
        });

Where:

"#gigatable" is the id of a <table> tag,
struct is the basic structure of a layout with it`s features (ex.: search box, pagination etc.),
ajax element contains the main script, that will load table content
columns actual columns for a table

HTML table structure skeleton, that matches former configuration:

    <table id="gigatable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Description</th>
          <th>Date</th>
          <th>Types</th>
          <th>Info</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Description</th>
          <th>Date</th>
          <th>Types</th>
          <th>Info</th>
        </tr>
    </tfoot>
  </table>

The only needed HTML elements in <table> tag, are the <thead> and <tfoot>, other structure will be created dynamically. Make sure they fit together (html table columns and json columns), it may run anyway, but the results and Your experience will be cleaner and better if they will match.

Editor and it`s features

Editor has been planned to support CRUD operations with versatile settings:

        var editor = new $.fn.GigaTable.Editor({
          ajax: 'editor.php',
          ajaxFiles: 'uploadFiles.php',
          struct: {
            buttons: ['top', 'bottom'] // buttons
          },
          fields: [
            {
              label: "ID",
              name: "id",
              type: 'hidden'
            },
            {// an example of using select - automatically selected if matches with data in table column
              label: "Types:",
              name: "types",
              values: [// if select,checkbox,radio etc types - need this kinda structure of values
                {'key1': 'val1'},
                {'key2': 'val2'}
              ],
              type: 'select', // select,checkbox,radio
              attrs: [
                {'multiple':true}
              ]
            },
            {
              label: "Article title:",
              name: "title",
              type: 'text', // default, other: password, file, select, multiselect etc
              attrs: [
                {'pattern':'^[A-Za-z0-9_]+$'}
              ]              
            },
            {
              label: "Description:",
              name: "desc",
              type: 'textarea'
            },
            {
              label: "Date Time:",
              name: "date",
              type: 'date'
            },
            {
              label: "Image:",
              name: "image",
              type: 'file'
            }
          ]
        });

ajax - script/path that will accept AJAX POST requests
ajaxFiles - only needed when You plan send ajax-file-upload on server
struct - positions the elements (ex. buttons - create,edit,delete) in the top and/or bottom
fields - contains all the columns/fields of a table that can be created/edited

Each field has the following properties:

label - just names the field in editor
name - the name of an element needed to send data-form on server
type - the type of a field, there are plenty types - ex.: email, password, text, textarea, file, date etc.
values - needed for html elements like select, checkbox, radio, it contains key=value pairs to fill name attr of a specified field and it`s value which user will see.
attrs - contains an array of a tag attributes needed to gear the element ex.: pattern, required, etc

Advanced settings for DataTable:

        $('#gigatable').GigaTable({
          struct: {// all in
            search: ['top', 'bottom'],
            rowsSelector: ['asc', 'top', 'bottom'],
            pagination: ['bottom']
          },
          lang: 'en', // english default
          perPageRows: [25, 50, 100, 200, 500],
          defaultPerPage: 50,
          ajax: 'gigatables.php',
          columns: [
            {// include all defaults
              data: "id",
              sortable: true,
              visible: true,
              searchable: true,
              discreteSearch: true, // false by default 
              discreteSearchValue: function (title) {
                return 'Поиск по полю ' + title;
              }
            },
            {data: "desc", sortable: false},
            {data: "title"},
            {
              data: "date",
              searchable: false
            },
            {
              data: "info",
              //              visible: false
            }

          ],
          columnOpts: [
            {
              render: function (data, row, type) {
                return '<div><form method="post" class="accForm" action=""><input type="hidden" name="action" value="forms" /><input type="hidden" name="id" value="' + row.id + '" /><div>' + data + '</div></form></div>';
              },
              target: 2
            },
            {
              render: function (data, row, type) {
                return '<div><form method="post" class="accForm" action=""><input type="hidden" name="action" value="forms" /><input type="hidden" name="id" value="' + row.id + '" /><div>' + data + '</div></form></div>';
              },
              target: 3
            }
          ],
          tableOpts: {
            buttons: [
              {extended: "editor_create", editor: editor},
              {extended: "editor_edit", editor: editor},
              {extended: "editor_remove", editor: editor}
            ],
            buttonsPosition: ['top', 'bottom'],
            theme: 'std'
          }
        });