[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1685
  • Last Modified:

Adding functionality to JQuery DataTables

I would like to add 3 buttons to my JQuery Datatables Plug-In so that when a user clicks on them it passes parameters to my datasource ( CFC ) and refreshes the table with the new data...

$(document).ready(function(){
  $('#reqs').dataTable({
  "sAjaxSource": "getInfo.cfc?method=getMyReqs&myQuery="+myQType,
  "bJQueryUI": true,
  "bProcessing": true,
  "aaSorting": [[1,'desc']],
  "iDisplayLength": 20,
  "aLengthMenu": [20, 40, 60, 100],
  "aoColumns": [
    { "mDataProp": "HPO" , "sTitle": "PO Number"},
    { "mDataProp": "HDATE" , "sTitle": "Date"},
    { "mDataProp": "HPI" , "sTitle": "PI"},
    { "mDataProp": "HNAME" , "sTitle": "Requestor"},
    { "mDataProp": "HVEND" , "sTitle": "Vendor"},
    { "mDataProp": "DESCRIPTION" , "sTitle": "Status"}
  ]
	  
	  });
});

Open in new window


When the button is clicked it should pass a parameter ( 1 or 2 or 3 ) to myQType and refresh the data in the table...

If possible I would like the buttons to be in the bottom bar of the DataTable ...
0
stu215
Asked:
stu215
  • 9
  • 9
3 Solutions
 
stu215Author Commented:
That doesn't realty show how to get the button to do what I want...
( pass one of three different vars to the CFC - and then come back with refreshed data )
0
 
dgrafxCommented:
ok - that will show how to inject the button and then to refresh the table use
oTable.fnReloadAjax();
see example here: https://www.datatables.net/forums/discussion/comment/23250

forgot about the refresh part ...
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
stu215Author Commented:
How do you get the button to change the variable being sent to the CFC ?  
Those all seem to be pre-built buttons that you can insert...

Can you show a specific example of the button that when clicked will change the variable "myQType" as that will determine what I do in the CFC ... and how to have the refresh wait until the data is returned?
0
 
dgrafxCommented:
here is a real basic example of changing the data on a link or button.
code your real example so that some event of your choosing will set the buttons "value".

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
	$(document).on("click", "#xyz", function() {
		var x = $('#xyz').attr('data');
		if(x == 1) {x = 2} else {x = 1};
		$('#xyz').attr('data',x);
		$('#xyz').text($(this).attr('data'));
                 return false;		
	});
});
</script>
<a id="xyz" data="1" 
	style="display:block;border:1px solid black;width:50px;text-align:center;">1</a>

Open in new window


after you are posting to the cfc with ajax then you call the refresh after the success function runs
0
 
stu215Author Commented:
... after looking at my code more I don't think the way  I was attempting to pass the variable is going to work as its only going to run once passing the myQType var the first time.

I'm more looking for assistance in fixing the function I have than tutorials ...  Saw most of that on google prior to posting and am still stuck at present...

I need 3 separate buttons which can pass a value to my CFC ( datasource ) and have it refresh the table on return...  I need a working example of this ... preferably using my code above so I can just paste it in...
0
 
dgrafxCommented:
sorry but i don't have a working example.
can you just create 3 buttons and code them with different values?
that's the first step
then call the refresh tables after the success function

something like

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	$('.xyz').live('click', function() {		
			$.ajax( {				
				data: $(this).value,	
				url: 'some.cfc?method=somemethod',
				success: function(result) {		    			
					oTable.fnReloadAjax();	//reload here				
				}
			});		
	});
});
</script>

<a class="xyz" value="1">1</a>
<a class="xyz" value="2">2</a>
<a class="xyz" value="3">3</a>

Open in new window

0
 
stu215Author Commented:
playing around with it atm but am getting this error in firebug:

TypeError: oTable.fnReloadAjax is not a function
oTable.fnReloadAjax();	//reload here

Open in new window

0
 
dgrafxCommented:
are you declaring var oTable = $('#example').dataTable(); AFTER datatables is initialized?

and also here is info on the plugin: http://datatables.net/plug-ins/api#fnReloadAjax
0
 
stu215Author Commented:
$(document).ready(function(){
	var oTable=$('#reqs').dataTable({
		"sAjaxSource": "getInfo.cfc?method=getMyReqs&myQuery="+myQType,
		"bJQueryUI": true,
		"bProcessing": true,
		"aaSorting": [[1,'desc']],
		"iDisplayLength": 20,
		"aLengthMenu": [20, 40, 60, 100],
		"aoColumns": [
			{ "mDataProp": "HPO" , "sTitle": "PO Number"},
			{ "mDataProp": "HDATE" , "sTitle": "Date"},
			{ "mDataProp": "HPI" , "sTitle": "PI"},
			{ "mDataProp": "HNAME" , "sTitle": "Requestor"},
			{ "mDataProp": "HVEND" , "sTitle": "Vendor"},
			{ "mDataProp": "DESCRIPTION" , "sTitle": "Status"}
		]
	});
	
	$('.xyz').click('click', function() {		
		$.ajax( {				
			data: $(this).value,	
			url: "getInfo.cfc?method=getMyReqs&myQuery="+myQType,
			success: function(result) {		    			
				oTable.fnReloadAjax();	//reload here				
			}
		});		
	});	
	
	
});

Open in new window

0
 
dgrafxCommented:
did you look at the plugin page?

oh hey - are you providing the fnReloadAjax function?
0
 
stu215Author Commented:
its not something built into the datables script files im importing?

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/JQueryAssets/DataTables_1_9_4/media/js/jquery.dataTables.min.js"></script>
0
 
stu215Author Commented:
Doh ... the reload function is not built in... I included it in a seperate JS.

and WOOT! its working!!!

Solution:
var myQType='open';

$(document).ready(function(){
	var oTable=$('#reqs').dataTable({
		"sAjaxSource": "getInfo.cfc?method=getMyReqs&myQuery="+myQType,
		"bJQueryUI": true,
		"bProcessing": true,
		"aaSorting": [[1,'desc']],
		"iDisplayLength": 20,
		"aLengthMenu": [20, 40, 60, 100],
		"aoColumns": [
			{ "mDataProp": "HPO" , "sTitle": "PO Number"},
			{ "mDataProp": "HDATE" , "sTitle": "Date"},
			{ "mDataProp": "HPI" , "sTitle": "PI"},
			{ "mDataProp": "HNAME" , "sTitle": "Requestor"},
			{ "mDataProp": "HVEND" , "sTitle": "Vendor"},
			{ "mDataProp": "DESCRIPTION" , "sTitle": "Status"}
		]
	});
	
	$('.xyz').click('click', function() {		
		oTable.fnReloadAjax('getInfo.cfc?method=getMyReqs&myQuery='+myQType);
	});	
	
});

Open in new window


Html:
            	<input type="button" class="xyz" name="TEST" value="Open" onClick="myQType='open';"/>
            	<input type="button" class="xyz" name="TEST" value="In Transition" onClick="myQType='transit';"/>
            	<input type="button" class="xyz" name="TEST" value="Closed/Cancelled" onClick="myQType='closed';"/>
            	<table id="reqs" width="100%">
                	<thead>
                	<tr>
                        <td width="75">PO Number</td>
                        <td width="200">Date</td>
                        <td width="150">PI</td>
                        <td width="150">Requestor</td>
                        <td>Vendor</td>
                        <td>Status</td>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

Open in new window

0
 
dgrafxCommented:
hey cool ...
0
 
dgrafxCommented:
thanks for the points and good luck!
0
 
stu215Author Commented:
One last Q... on reload i seem to loose my style formatting from the JQuery UI Smoothness which gets applied in the original load by the following line ... :-/

            "bJQueryUI": true,
0
 
stu215Author Commented:
Never mind it was a a piece of bad data messing it up... All good
0
 
dgrafxCommented:
ok cool - I was looking into it but hadn't found anything ...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now