Skip to content
brunoborges edited this page Mar 17, 2011 · 2 revisions

DataTables jQuery Plugin Integration

Overview

(from http://www.datatables.net)

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Scrolling options for table viewport
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid - backed by a suite of 1400+ unit tests
  • Wide variety of plug-ins inc. TableTools, FixedHeader, KeyTable and more
  • And many more

Example

Take a look at a simple HTML file displaying a table with 3 columns:

<div style="width: 980px">
<table wicket:id="table" cellpadding="0" cellspacing="0" border="0" class="display" style="width: 980px">
        <thead>
                <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>etc</th>
                </tr>
        </thead>
        <tbody>
                <tr wicket:id="rows">
                        <td wicket:id="col1">Row 1 Data 1</td>
                        <td wicket:id="col2">Row 1 Data 2</td>
                        <td wicket:id="col3">etc</td>
                </tr>
        </tbody>
</table>
</div>

Now take a look at the Java code:

DemoDataTable table = new DemoDatatable("table");
add(table);

List<String[]> rows = ...

ListView<String[]> lv = new ListView<String[]>("rows", rows) {
    @Override
    protected void populateItem(ListItem<String[]> item) {
        String[] row = item.getModelObject();

        item.add(new Label("col1", row[0]));
        item.add(new Label("col2", row[1]));
        item.add(new Label("col3", row[2]));
    }
};

table.add(lv);

The output look'n feel is exactly the same as in http://www.datatables.net

Clone this wiki locally