mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-12-05 05:04:20 +00:00
a50f5555a9
Also change build widget example code to use dataType:"text" for csv data
175 lines
5.5 KiB
JavaScript
175 lines
5.5 KiB
JavaScript
$(function(){
|
|
|
|
// ***************************
|
|
// ARRAY
|
|
// ***************************
|
|
var arry = [
|
|
[ 'ID', 'Name', 'Age', 'Date' ], // header
|
|
[ 'A42b', 'Parker', 28, 'Jul 6, 2006 8:14 AM' ], // row 1
|
|
[ 'A255', 'Hood', 33, 'Dec 10, 2002 5:14 AM' ], // row 2
|
|
[ 'A33', 'Kent', 18, 'Jan 12, 2003 11:14 AM' ], // row 3
|
|
[ 'A1', 'Franklin', 45, 'Jan 18, 2001 9:12 AM' ], // row 4
|
|
[ 'A102', 'Evans', 22, 'Jan 18, 2007 9:12 AM' ], // row 5
|
|
[ 'A42a', 'Everet', 22, 'Jan 18, 2007 9:12 AM' ], // row 6
|
|
[ 'ID', 'Name', 'Age', 'Date' ] // footer
|
|
];
|
|
|
|
$('#array2Table').tablesorter({
|
|
theme: 'blue',
|
|
data : arry,
|
|
widgets: ['zebra'],
|
|
widgetOptions : {
|
|
// build_type : 'array', // can be detected if undefined
|
|
// build_source : arry, // overrides the data setting above
|
|
build_headers : {
|
|
widths : ['15%', '30%', '15%', '40%'] // set header cell widths
|
|
},
|
|
build_footers : {
|
|
text : [ 'ID (a###)', 'Last Name', 'Age (joined)', 'Date (joined)' ]
|
|
}
|
|
}
|
|
});
|
|
|
|
// ***************************
|
|
// ARRAY (from string)
|
|
// ***************************
|
|
$('#string2Table').tablesorter({
|
|
theme: 'blue',
|
|
widgets: ['zebra'],
|
|
widgetOptions: {
|
|
build_type : 'array',
|
|
build_source : 'header 1,header 2,header 3;r1c1,r1c2,r1c3;r2c1,r2c2,r2c3;r3c1,r3c2,r3c3;"footer, 1","footer, 2","footer, 3"',
|
|
build_processing : function(data, wo) {
|
|
var rows = data.split(';');
|
|
return $.each(rows, function(i,cells) {
|
|
// similar to using rows[i] = cells.split(',') but the splitCSV script
|
|
// doesn't split the cell if the separator (comma) is within quotes
|
|
rows[i] = $.tablesorter.buildTable.splitCSV(cells, ',');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// ***************************
|
|
// CSV (DOM)
|
|
// ***************************
|
|
$('#csv2Table').tablesorter({
|
|
theme: 'blue',
|
|
widgets: ['zebra'],
|
|
widgetOptions: {
|
|
// *** build widget core ***
|
|
build_type : 'csv', // array, object, csv, ajax
|
|
build_source : $('.csv'), // url, dom
|
|
build_complete : 'tablesorter-build-complete', // triggered event when build completes
|
|
|
|
// *** CSV & array ***
|
|
build_headers : {
|
|
rows : 1, // Number of header rows from the csv
|
|
classes : [], // Header classes to apply to cells
|
|
text : [], // Header cell text
|
|
widths : ['3%', '27%', '50%', '20%'] // set header cell widths
|
|
},
|
|
build_footers : {
|
|
rows : 1, // Number of header rows from the csv
|
|
classes : [], // Footer classes to apply to cells
|
|
text : [] // Footer cell text
|
|
},
|
|
build_numbers : {
|
|
addColumn : '#', // include row numbering column?
|
|
sortable : true // make column sortable?
|
|
},
|
|
|
|
// *** CSV options ***
|
|
build_csvStartLine : 0, // line within the csv to start adding to table
|
|
build_csvSeparator : ",", // csv separator
|
|
}
|
|
});
|
|
|
|
// ***************************
|
|
// CSV (Ajax)
|
|
// ***************************
|
|
$('#csv2Table2').tablesorter({
|
|
theme: 'blue',
|
|
widgets: ['zebra'],
|
|
widgetOptions: {
|
|
// *** build widget core ***
|
|
build_type : 'csv',
|
|
build_source : { url: 'assets/build.txt', dataType: 'text' },
|
|
build_headers : {
|
|
widths : ['30%', '50%', '20%'] // set header cell widths
|
|
}
|
|
}
|
|
});
|
|
|
|
// ***************************
|
|
// OBJECT (Variable)
|
|
// ***************************
|
|
var dataObject = {
|
|
headers : [
|
|
[
|
|
// each object/string is a cell
|
|
{ text: 'First Name', class: 'fname', width: '10%' }, // row 0 cell 1
|
|
'Last Name',
|
|
{ text: 'Age', class: 'age', 'data-sorter' : false }, // row 0 cell 3
|
|
'Total',
|
|
{ text: 'Discount', class : 'sorter-false' }, // row 0 cell 5
|
|
{ text: 'Date', class : 'date' } // row 0 cell 6
|
|
]
|
|
],
|
|
footers : 'clone', // clone headers or assign array like headers
|
|
rows : [
|
|
// TBODY 1
|
|
[ 'Peter', 'Parker', 28, '$9.99', '20%', 'Jul 6, 2006 8:14 AM' ], // row 1
|
|
[ 'John', 'Hood', 33, '$19.99', '25%', 'Dec 10, 2002 5:14 AM' ], // row 2
|
|
[ 'Clark', 'Kent', 18, '$15.89', '44%', 'Jan 12, 2003 11:14 AM' ], // row 3
|
|
|
|
// TBODY 2
|
|
{ newTbody: true, class: 'tablesorter-infoOnly' },
|
|
{ cells : [ { html: '<strong>Info Row</strong>', colSpan: 6 } ] }, // row 4
|
|
|
|
// TBODY 3
|
|
{ newTbody: true },
|
|
[ 'Bruce', 'Evans', 22, '$13.19', '11%', 'Jan 18, 2007 9:12 AM' ], // row 5
|
|
[ 'Brice', 'Almighty', 45, '$153.19', '44%', 'Jan 18, 2001 9:12 AM' ], // row 6
|
|
|
|
{ class: 'specialRow', // row 7
|
|
cells: [
|
|
// each object/string is a cell
|
|
{ text: 'Fred', class: 'fname' },
|
|
{ text: 'Smith', class: 'lname' },
|
|
{ text: 18, class: 'age', 'data-info': 'fake ID!, he is really 16' },
|
|
{ text: '$22.44', class: 'total' },
|
|
'8%',
|
|
{ text: 'Aug 20, 2012 10:15 AM', class: 'date' }
|
|
],
|
|
'data-info' : 'This row likes turtles'
|
|
}
|
|
]
|
|
};
|
|
|
|
$('#object2Table').tablesorter({
|
|
theme: 'blue',
|
|
data : dataObject,
|
|
widgets: ['zebra'],
|
|
widgetOptions : {
|
|
// *** build object options ***
|
|
build_objectRowKey : 'rows', // object key containing table rows
|
|
build_objectCellKey : 'cells', // object key containing table cells (within the rows object)
|
|
build_objectHeaderKey : 'headers', // object key containing table headers
|
|
build_objectFooterKey : 'footers' // object key containing table footers
|
|
}
|
|
});
|
|
|
|
// ***************************
|
|
// OBJECT (JSON via Ajax)
|
|
// ***************************
|
|
$('#object2Table2').tablesorter({
|
|
theme: 'blue',
|
|
widgets: ['zebra'],
|
|
widgetOptions: {
|
|
build_type : 'json',
|
|
build_source : { url: 'assets/build.json', dataType: 'json' }
|
|
}
|
|
});
|
|
|
|
}); |