Dynatable example

HTML

<table border="1" id="my-table">
    <thead>
        <tr>
            <th>line</th>
            <th>value1</th>
            <th>value2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>1.3</td>
            <td>1.4</td>
        </tr>
        <tr>
            <td rowspan="2">2</td>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
        <tr>
            <td>2.3</td>
            <td>2.4</td>
        </tr>
    </tbody>
</table>
<table border="1" id="my-table2">
    <thead>
        <tr>
            <th>line</th>
            <th>value1</th>
            <th>value2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>1.3</td>
            <td>1.4</td>
        </tr>
        <tr>
            <td rowspan="2">2</td>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
        <tr>
            <td>2.3</td>
            <td>2.4</td>
        </tr>
    </tbody>
</table>
<button onclick="$('#my-table').dynatable();">DYNATABLE</button>

CSS

/*
 * jQuery Dynatable plugin 0.3.1
 *
 * Copyright (c) 2014 Steve Schwartz (JangoSteve)
 *
 * Dual licensed under the AGPL and Proprietary licenses:
 *   http://www.dynatable.com/license/
 *
 * Date: Tue Jan 02 2014
 */
th a {
  color: #fff;
}
th a:hover {
  color: #fff;
  text-decoration: underline;
}

.dynatable-search {
  float: right;
  margin-bottom: 10px;
}

.dynatable-pagination-links {
  float: right;
}

.dynatable-record-count {
  display: block;
  padding: 5px 0;
}

.dynatable-pagination-links span,
.dynatable-pagination-links li {
  display: inline-block;
}

.dynatable-page-link,
.dynatable-page-break {
  display: block;
  padding: 5px 7px;
}

.dynatable-page-link {
  cursor: pointer;
}

.dynatable-active-page,
.dynatable-disabled-page {
  cursor: text;
}
.dynatable-active-page:hover,
.dynatable-disabled-page:hover {
  text-decoration: none;
}

.dynatable-active-page {
  background: #71AF5A;
  border-radius: 5px;
  color: #fff;
}
.dynatable-active-page:hover {
  color: #fff;
}
.dynatable-disabled-page,
.dynatable-disabled-page:hover {
  background: none;
  color: #999;
}

JavaScript

/*
 * jQuery Dynatable plugin 0.3.1
 *
 * Copyright (c) 2014 Steve Schwartz (JangoSteve)
 *
 * Dual licensed under the AGPL and Proprietary licenses:
 *   http://www.dynatable.com/license/
 *
 * Date: Tue Jan 02 2014
 */
//

(function($) {
  var defaults,
      mergeSettings,
      dt,
      Model,
      modelPrototypes = {
        dom: Dom,
        domColumns: DomColumns,
        records: Records,
        recordsCount: RecordsCount,
        processingIndicator: ProcessingIndicator,
        state: State,
        sorts: Sorts,
        sortsHeaders: SortsHeaders,
        queries: Queries,
        inputsSearch: InputsSearch,
        paginationPage: PaginationPage,
        paginationPerPage: PaginationPerPage,
        paginationLinks: PaginationLinks
      },
      utility,
      build,
      processAll,
      initModel,
      defaultRowWriter,
      defaultCellWriter,
      defaultAttributeWriter,
      defaultAttributeReader;

  //-----------------------------------------------------------------
  // Cached plugin global defaults
  //-----------------------------------------------------------------

  defaults = {
    features: {
      paginate: true,
      sort: true,
      pushState: true,
      search: true,
      recordCount: true,
      perPageSelect: true
    },
    table: {
      defaultColumnIdStyle: 'camelCase',
      columns: null,
      headRowSelector: 'thead tr', // or e.g. tr:first-child
      bodyRowSelector: 'tbody tr',
      headRowClass: null
    },
    inputs: {
      queries: null,
      sorts: null,
      multisort: ['ctrlKey', 'shiftKey', 'metaKey'],
      page: null,
      queryEvent: 'blur change',
      recordCountTarget: null,
      recordCountPlacement: 'after',
      paginationLinkTarget: null,
      paginationLinkPlacement: 'after',
      paginationClass: 'dynatable-pagination-links',
      paginationLinkClass: 'dynatable-page-link',
      paginationPrevClass: 'dynatable-page-prev',
      paginationNextClass: 'dynatable-page-next',
    ...