https://github.com/zenoo/ajaxtable

Handles a table loading with AJAX
https://github.com/zenoo/ajaxtable

ajax jquery plugin

Last synced: 30 days ago
JSON representation

Handles a table loading with AJAX

• Host: GitHub
• URL: https://github.com/zenoo/ajaxtable
• Owner: Zenoo
• License: mit
• Created: 2018-05-15T07:36:33.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T05:02:46.000Z (almost 2 years ago)
• Last Synced: 2024-10-15T11:03:57.319Z (2 months ago)
• Topics: ajax, jquery, plugin
• Language: JavaScript
• Homepage:
• Size: 757 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# ajaxTable [(Demo)](https://jsfiddle.net/Zenoo0/g4goby5m/)

![Dependencies](https://david-dm.org/Zenoo/ajaxTable.svg)

Handle your table display asynchronously

### Doc

* **Installation**

ajaxTable uses [slick-loader](https://www.npmjs.com/package/slick-loader), [csvexporter](https://www.npmjs.com/package/csvexporter) and [jQuery-excel-exporter](https://www.npmjs.com/package/jquery-excel-exporter)  

Simply import JQuery, those 3 packages & ajaxTable into your HTML.

```

```

* **How to use**

Call `.ajaxTable()` on an existing table (or array of tables) jQuery object :

```

$('table').ajaxTable({

    ...

});

```

* **Options**

```

{

  source: false,            // URL used to fetch the data. Set to false to disable AJAX loading

  sourceContext: {},        // Optional object to pass to the server while fetching the data

  printButtons: true,       // Should the print buttons be displayed?

  orderBy: 0,               // Index of the column used to order the table

  orderSort: 'desc',        // Order direction

  logging: false,           // Should ajaxTable use the developper console?

  contentType: null,        // Use this to manually set the content type of the requests

  searchPlaceholders: null, // Default search placeholders (Example: ['search1', 'search2'])

  onStructureReady: function (table, data) { }, // Runs when the ajaxTable structure is ready

  onReady: function (table, data) { },          // Runs when the ajaxTable is ready

  beforeAjax: function (table, data) { },       // Runs before every AJAX call

  onUpdate: function (table, data) { }          // Runs after every table update

}

```

* **Server configuration**

If you use the ajax functionality, you'll need to setup your server to correctly answer to the AJAX calls.  

The data sent from your server should be a valid JSON like this :

```

{

  "data":[

    "firstsecondthird",

    "first 2second 2third 2",

    "first 3second 3third 3"

  ],

  "total":2

}

```

The `data` property contains an Array of Strings representing each ``.  

The `total` property contains the total amount of lines in your table.

The data passed through the AJAX request looks like this

```

{

  page: 2,                    // The page to be displayed. Here, since we want page 2, we need the items in the range [11 - 20]

  orderBy: 1,                 // The index of the column the table is being ordered by. (Zero-based)

  order: "asc",               // Order sort. 'asc' or 'desc'

  search: ['','','test',''],  // The array containing the values of the search inputs

  columns: 4,                 // The number of columns in the table

  total: true,                // OPTIONAL: if set to TRUE, you should send the property `total` back

  context: {                  // The object from the `sourceContext` parameter

    test: 'test1',

    ...

  }

}

```

* **Example**

See this [JSFiddle](https://jsfiddle.net/Zenoo0/g4goby5m/) for a working example

* **PHP server code sample**

Here is a sample of what the server-side PHP code could look like

```

if(isset($_POST['total']) || isset($_POST['page'])){

    $return = array();

    $page = isset($_POST['page']) ? (int)$_POST['page'] : 1;

    $search = isset($_POST['search']) ? $_POST['search'] : array_fill(0, (int)$_POST['columns'], "");

    $orderIndex = isset($_POST['orderBy']) ? $_POST['orderBy'] : 0;

    $order = isset($_POST['order']) ? $_POST['order'] : 'desc';

    $context = $_POST['context']

    $currentData = getItems($page, $search, $orderIndex, $order, $context);  // Get your items here

    $currentTotal = getTotalItems($search, $context);                        // Get the total number of items here

    $return['data'] = $currentData;

    if(isset($_POST['total']) && $_POST['total'] == 'true'){

        $return['total'] = $currentTotal;

    }

    echo json_encode($return);

}

``` 

## Authors

* **Zenoo** - *Initial work* - [Zenoo.fr](http://zenoo.fr)