Muffin Table

Version 1.01

Download: wrapbootstrap.com/theme/muffin-table-WB0202124

Author: thomasjohn.eu

How to create a table?

1. Create <div id=“<table id>”></div>.

2. Use table_init function to initialize table.

3. Call table_update (render table) or table_sort (sort and render table)

---

function table_init(id, style, colsname, compare, navi, decor, checkboxes, width, datafunction, search)

Where:

id - table id (string)

style - additional table classes (string), example ‘table-hover’ - produce “… class=‘table table-hover’”

colsname - columns names (array), example: [‘first’, ‘second’, ”]; inside a table you can store more data than columns (hidden data), example: hidden server side row id

compare - compare functions for each column (array), example: [mycompare,,] - own compare function for the first column

navi - navigation initial values (array), example: [,0,5] - start from row 0 and show 5 elements (first parameter is not used)

decor - function or decoration string (array), example: [show_stars,‘result: <data>’,] - values from the first column will be filtered by:

function show_stars(data){

var html = "";
for (var i=0; i<data; i++)
  html += "<img src=\"star.png\">";
return html;

}

decoration string example with <data>, <row> and <id> special strings replaced by values, example: ‘value <data> for table <id> (row #<row>)’

checkboxes - checkboxes in the first column (boolean) - if TRUE, first column should include values 1/0

width - column width (array), example: [50,,] - first column with 50px width

datafunction - get data function (function)

search - handle search fields (boolean) - set to TRUE if search field and reset search button are available

---

function table_update(id)

Render table. This function will call datafunction if no data were loaded before.

---

function table_sort(id, cn, desc)

Sort by column number cn (optional desc) and render table. This function will call datafunction if no data or only a part of all data (on server side) were loaded before.

---

function datafunction(par)

Your function. This function should prepare data (load via Ajax) and call table_imback function.

Where:

par - (array)

• par - table id

• par - action (1 - table update, 2 - Sort, 3 - Rows, 4 - From)

Sort

• par - coln

• par - desc

Rows

• par - new size

From

• par - new from

---

table_imback(id, par, data, alldata, datasize)

id - table id

par - same as for datafunction

data - new data

alldata (datasize) - TRUE if all data are loaded (if alldata is FALSE datasize should show real size)

---

All global objects:

var tables=[];

function table_init(id, style, colsname, compare, navi, decor, checkboxes, width, datafunction, search), function table_update(id), function table_sort(id, n, desc), function table_imback(id, par, data, alldata, datasize),

function table_localNavi(id, event), function table_setNavi(id, from, rowsn, sort, desc), function table_set(id, data, datasize), function table_remove(id), function table_td(c, width), function table_th(c, width), function table_button(id, label, data, navi), function table_search(id), function table_srem(id), function table_selectAll(id), function table_unselect(id), function table_check(id, event), function table_encode(data)

---

HTML:

<div id=“<table id>”></div> - place for your table

tableid+“_selectall” - select all button id

tableid+“_unselect” - unselect button id

tableid+“_search” - search field id

tableid+“_srem” - reset search field button id

tableid+“_navi” - navigation div id

id=tableid+“_rowsn” and data-table-rowsn=“yes” and class=tableid+“_navi”

• example (table name “tab_3”):

<select id=“tab_3_rowsn” data-table-rowsn=“yes” class=“tab_3_navi”>

<option value="10">10</option>
<option value="50">50</option>

</select>

---

Version 1.02 change log (coming soon)

• library don’t produce “table” class by default

• optional newrow html code (instead of <tr>…</tr>)

• update don’t show empty columns name row

• update pass <row> and table <id> to decor function