Solved

Adding functionality to JQuery DataTables

Posted on 2014-02-20
18
1,407 Views
Last Modified: 2014-02-24
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
Comment
Question by:stu215
  • 9
  • 9
18 Comments
 
LVL 25

Expert Comment

by:dgrafx
ID: 39876591
0
 
LVL 10

Author Comment

by:stu215
ID: 39882827
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
 
LVL 25

Expert Comment

by:dgrafx
ID: 39882900
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
 
LVL 10

Author Comment

by:stu215
ID: 39882935
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
 
LVL 25

Expert Comment

by:dgrafx
ID: 39883075
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
 
LVL 10

Author Comment

by:stu215
ID: 39883282
... 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
 
LVL 25

Accepted Solution

by:
dgrafx earned 500 total points
ID: 39883345
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
 
LVL 10

Author Comment

by:stu215
ID: 39883441
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
 
LVL 25

Assisted Solution

by:dgrafx
dgrafx earned 500 total points
ID: 39883466
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 10

Author Comment

by:stu215
ID: 39883492
$(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
 
LVL 25

Assisted Solution

by:dgrafx
dgrafx earned 500 total points
ID: 39883521
did you look at the plugin page?

oh hey - are you providing the fnReloadAjax function?
0
 
LVL 10

Author Comment

by:stu215
ID: 39883529
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
 
LVL 10

Author Comment

by:stu215
ID: 39883565
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
 
LVL 25

Expert Comment

by:dgrafx
ID: 39883583
hey cool ...
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 39883595
thanks for the points and good luck!
0
 
LVL 10

Author Comment

by:stu215
ID: 39883618
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
 
LVL 10

Author Comment

by:stu215
ID: 39883626
Never mind it was a a piece of bad data messing it up... All good
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 39883676
ok cool - I was looking into it but hadn't found anything ...
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now