How can I improve performance for my JavaScript table class?

I've written a JavaScript table class to make it easy to display tabular data and allow the user to sort the data by clicking on the table headers.

However, when there are hundreds of rows, performance on the sorting is a bit sluggish. I would like to know what kind of improvements I can make. I suspect that my string concatenation methods in displayData may not be optimal.

```
var tableUtility = (function () {
var fn = {};
// This is a constructor function for an object that represents a table
fn.DataTable = function (p_data, p_columnDataFields, p_tableId, p_displayCallback) {
// This is expected to be an array of objects.
var data = p_data;
// This is expected to be an array of strings that represents the names of the fields to use for the column data.
var columnDataFields = p_columnDataFields;
// This is expected to be the HTML ID of the table in which the data will be displayed.
// Note that this JavaScript will only affect the TBODY of the TABLE. It is expected that the HTML already contains the THEAD with the column headers.
var tableId = p_tableId;
// This is expected to be either null or a function to execute after the table is displayed.
var displayCallback = p_displayCallback;

// Find the TBODY element of the TABLE and cache it
var tbody = document.getElementById(tableId).getElementsByTagName('tbody')[0];

// softData sorts the table's data. fields is expected to be an array of strings with the names of the fields to sort by. sort functions is expected
// to be an array of functions describing how to sort each field.
// Note that fields must be distinct, or weird things will happen.
this.sortData = function (sortFields, sortFunctions) {
if (sortFields.length != sortFunctions.length)
throw new Error('fields and sortFunctions don\'t have the same length.');

var builtInSorts = th

This was originally a comment, but it got long.

-
The jQuery/innerHTML stuff is probably slowing it down, as it looks like you guessed. Tables in IE + innerHTML is broken. Instead, I'd use the DOM.

-
Reconstituting the entire table for each sort is bound to be slow. Since you are doing the innerHTML thing, the entire table needs to be rebuilt, rather than just moving some tablerow nodes around.

Most javascript table sort scripts take a different approach. The table is produced on the server or by a content writer in the normal way, and given a class like "sortable-table" for example, possibly with some columns having classes for type hinting or other metadata as well. Target tables with the appropriate classes and make them sortable. Sort tables by taking the tbody element and sorting its rows by removing and re-appending them, using the DOM.

Even if you want to create the table element programatically, you could use a similar approach from there on.

Recap:

• Use the DOM, not jQuery.

• Use the DOM, not innerHTML.

• Consider letting the table be created in the usual way instead of through an API.

• Use the DOM.

StackExchange Code Review Q#8783, answer score: 2