Table Widget (DHTMLSuite.tableWidget)
Specifications
- Widget/Class name: DHTMLSuite.tableWidget
- Demos:
- Css: [THEMES_FOLDER]/css/table-widget.css
Configuration
The tableWidget class transforms a plain HTML table on your page. It makes it sortable and it also modifies the layout of the table.
This is an example of a table:
<div>
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
</tbody>
</table>
</div>
Please not the following:
- There's a DIV outside the table.
- Headings for the table is inside a <THEAD> tag
- The table got it's unique id.
In order to make this table sortable, we create a DHTMLSuite.tableWidget object and point it to the table above:
var tableWidgetObj = new DHTMLSuite.tableWidget();
tableWidgetObj.setTableId('myTable');
tableWidgetObj.setTableWidth('95%');
tableWidgetObj.setTableHeight(250);
tableWidgetObj.setColumnSort(Array('S','N',false,'N','S'));
tableWidgetObj.init();
tableWidgetObj.sortTableByColumn(0); // Initially sort the table by the first column
We point it to <TABLE id="myTable"> in the setTableId method. The width of the table iset to 95%(relative size to parent element of outside div). Table height is set to 250pixels. Then we have specified which columns to sort and how to sort them. First and last column should be sorted as strings, while second and fourth column should be sorted numerically. The third column is not sortable.
We call the init method to initialize the widget and then the sortTableByColumn method to initially sort it by the first column.
Sort data on the server
SQL queries used in this demo: tableWidgetServerSortDbDump.txt. In order to run the demo on your local server, create a database(mySQL), then create the table by copying and pasting the content of this txt file into your db concole. Finally, create a database connection at the top of demos/includes/getTableData.php.
In this section, we will see how to use the tableWidget class to sort data on the server instead of on the client.
First, we create the <TABLE> in the same way as shown above.
The methods used for the tableWidget are also pretty much the same as in the previous example:
var tableWidgetObj = new DHTMLSuite.tableWidget();
tableWidgetObj.setTableId('myTable');
tableWidgetObj.setTableWidth('95%');
tableWidgetObj.setTableHeight(230);
tableWidgetObj.setServerSideSort(true);
// The value doesn't matter here since we're using server side sort.
// However, we need to set a value for the sortable columns in order
// to get onclick events on the header cells.
tableWidgetObj.setColumnSort(Array('S','S','S','S','S'));
tableWidgetObj.setServersideSortFileName('includes/getTableData.php'); // Specify server side file name
tableWidgetObj.setServersideSortNumberOfRows(10); // Receive 10 rows from the server
tableWidgetObj.init();
tableWidgetObj.updateTableHeader(0,'ascending');
Now, the table widget is created. We have specified that we want to sort data on the server by calling the
- setServerSideSort,
- setServersideSortFileName and
- setServersideSortNumberOfRows methods
The setServerSideSort method is used only to specify that we want to sort data on the server. The setServersideSortFileName is used to specify where want our script to get new sorted data from. At last, setServersideSortNumberOfRows specifies that we want to get 10 rows of data in the response from the server.
Format of data from server
The data from the server is returned in the following format:
cell content###cell content 2|||cell content new row###cell content
Each cell is separated by ### and each new row is separated by |||.
The tableWidgetPageHandler object
The tableWidgetPageHandler class is used to create a table navigation bar for our table.
In our example, it is created by this code:
var pagehandler = new DHTMLSuite.tableWidgetPageHandler();
pagehandler.setTargetId('tableWidgetPagina'); // Specify where to insert the paginating object.
pagehandler.setTableRef(tableWidgetObj); // Specify where to insert the paginating object.
pagehandler.setTotalNumberOfRows(40);
pagehandler.init();
- The setTargetId method specifies where we want to insert the page handler. example: <DIV id="tableWidgetPagina"></DIV>.
- setTableRef is used to connect the pageHandler with the tableWidgetObj so that they can communicate with each other.
- setTotalNumberOfRows specifies the total number of records in the entire dataset
- init initalizes the pageHandler widget
