CODEWITHSUNDEEP
jqueryhtml-tableyuiinline-editingprogressive-enhancement
Hank Gay
Hank Gay

Reputation: 71999

What's the closest jQuery approximation to YUI's DataTable?

My two highest priorities are progressive enhancement and inline editing. I've found progressive enhancement (DataTables) and inline editing (jqGrid), but not both. Support for jQuery UI themes would be nice, but is a lower priority.

UPDATE: Here's an example of what I'm imagining the solution would resemble:

<table summary="A table full of example tabular data">
  <caption>My Table to Progressively Enhance</caption>
  <thead>
    <tr>
      <th id="colA">Column A</th>
      <th id="colB">Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="colA">foo</td>
      <td headers="colB">bar</td>
    </tr>
    <tr>
      <td headers="colA">argle</td>
      <td headers="colB">bargle</td>
    </tr>
  </tbody>
</table>

… insert jquery datatable stuff here …

<script type="text/javascript">
    progressivelyEnhanceMyTable();
</script>

Upvotes: 1

Views: 3987

Answers (3)

pfctdayelise
pfctdayelise

Reputation: 5285

There is a plugin to datatables called jquery-datatables-editable which adds inline editing.

Upvotes: 1

Hank Gay
Hank Gay

Reputation: 71999

With the latest release of jqGrid, we now get tableToGrid, which solves the grid-from-markup problem quite nicely.

Upvotes: 2

Jesse Kochis
Jesse Kochis

Reputation: 770

I think jqGrid would be a pretty good fit.

UPDATE:

You can use code like this to convert your table to a javascript object

var $table = $('table'); // select your table
var data = []; // instantiate the data array
$('tr', $table).each(function(i, item){ // loop through the table rows
    obj = {} // create the object to append to the data array
    obj.name = $('td:eq(0)',$(this)).text().trim(); 
    obj.desc = $('td:eq(1)',$(this)).text().trim();
    data += obj; // add the object to the array
});

and then tack it on like in the loading array data example

for(var i=0;i<=data.length;i++) $("#datagrid").addRowData(i+1,data[i]);

Upvotes: 5

Related Questions