Search jQuery

jQuery Forum

Using jQuery Plugins

rpereira

TableSorter and TableSorterPager: How to reload tablesorter table after using drop down values to run new query

in Using jQuery Plugins • 8 years ago

I have figured out how to get the page to do what they were looking for using append.

Thanks anyway...

I have taken over someones code, and most of this is very new to me.Below are the files I am working with. What is supposed to happen is that the page loads with an empty table. Then after a value, or values, are selected from the drop down, the tablesorter table should refresh based on the results from a query. Right now, the select works, the submit works, but the table does not refresh.

Javascript - including tablesorter and tablesorterPager declarations

var xhr = null;
var VALIDATION_URL = 'ajax.php';
var campaign_summary = {
table:null,
body:null
};
var multi_list = {
campaign_list: null
};
var campaign_array = [];
function initialize(){
campaign_summary.table = $('#campaignTable');
campaign_summary.body = $('#campaignTable tbody');
/* initialize the campaigns dropdown using the multiselectfilter widget */
multi_list.campaign_list = $("#campaign_list");
if( multi_list.campaign_list.length){
multi_list.campaign_list.multiselect({
noneSelectedText: "Select One or More Campaigns",
selectedText: "# of # campaigns",
minWidth: 550
}).multiselectfilter();
}
/* get the values on submit */
$("form").on("submit", function(e){
e.preventDefault();
campaign_array = multi_list.campaign_list.multiselect("getChecked").map(function(){
return this.value;
}).get();
console.log('Campaign Array: ', campaign_array);
var ajaxObj = $.ajax({
url : VALIDATION_URL + '?operation=get_campaign_summary&campaign_array=' + campaign_array,
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data, url ) {
console.log('Submitted: ', data);
},
error : function( data, xhr, err ) {
console.log('Oops: ', data, xhr , err);
}
});
console.log('ajaxObj: ', ajaxObj);
return false;
});
/*Apply the tablesorter JQuery plugin to the summary table*/
campaign_summary.table.tablesorter({
theme: 'blue',
widthFixed: true,
sortLocaleCompare: true,
widgets: ['zebra'],
sortList: [ [0,1] ],
headers: {
'.pager' : {
sorter: false
},
'.no_sort' : {
sorter: false
}
}
});
/*Apply the pager to the summary table, also provides AJAX calls */
campaign_summary.table.tablesorterPager({
container: $("#campaignTable .pager"),
removeRows: false,
cssGoto: '.gotoPage',
ajaxUrl: VALIDATION_URL + '?operation=get_campaign_summary&page={page}&size={size}&{sortList:column}',
customAjaxUrl: function(table, url) {
$(table).trigger('changingUrl',url);
return url;
},
ajaxObject: {
dataType: 'json'
},
ajaxProcessing: function(data) {
// Code to handle data recieved from database
if(!data){return;} //if nothing recieved exit
total = data.total;
if(total < 1){
campaign_summary.body.empty();
}
// console.log('Data: ', data);
// console.log('Data Row: ', data.rows);
rows = rows_to_array(data.rows);
headers = $.makeArray(data.headers);
headers.push(''); //end of array
return [total, rows, headers]; //Required return for pager to function
}
});
/*converts the data for ticket table into an array*/
function rows_to_array(rows){
var ret = []
for(i=0;i<rows.length;i++){
ret.push(row_to_array(rows[i]));
}
return ret;
};
/*converts one row of ticket table data into an array*/
function row_to_array(row){
var ret = [];
ret.push(row['name']);
ret.push(row['discount_rate']);
ret.push(row['redeem_limit']);
ret.push(row['imported_files']);
ret.push(row['active_codes']);
ret.push(row['future_codes']);
ret.push(row['expired_codes']);
ret.push(row['redeemed_codes']);
ret.push(row['total_codes']);
ret.push('<a href="#" onclick="update_details("' + row['id'] + '","' + row['name'] + '")">View</a>');
return ret;
};
}
function request (options, callback) {
// if a request has been sent out cancel it
if (xhr) {
// IE 7 fix
try {
xhr.abort();
}
catch(e){}
}
// send another request, store the jqXHR object
xhr = $.ajax({
type: 'GET',
url: VALIDATION_URL,
data: options,
success: function (data) {
callback(data);
},
dataType: 'json',
error: function () {
}
});
// return xhr;
}
$(initialize)

Partial Ajax script showing get_campaign_summary call

......
case 'get_campaign_summary':
log_message(log_var_dump($request));
$campaign_array = explode(',',$request->campaign_array); // creates an array from the comma delimited string
$response = get_campaign_summary($campaign_array,$request->filter,$request->column,$request->page,$request->size,false,false);
log_message(log_var_dump("RESPONSE: " . $response));
break;
........
endswitch;
echo json_encode($response);
exit(0);

I know this is a lot to look at, and will probably be quite confusing. I will attempt to answer any questions. If need be, I can try attaching the full files (including the page HTML and query), but I'm trying to show only what I think is really needed.

As I said, I have taken over someone else's code, and I myself am having difficulty with it. It seems over complicated, but this is what I have to work with.

In campaigns.js, I can see that the query has run and I have the correct information in "data"

I am just not sure how to get the campaign_summary.table to reload with this new data.

Thanks in advance for any and all help.

Response title

Attachments

jQuery Forum

TableSorter and TableSorterPager: How to reload tablesorter table after using drop down values to run new query

Statistics

Tags

Actions