Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all 1816 articles
Browse latest View live
↧

FixedColumns and extra data

March 28, 2013, 11:07 am
$
0
0
Datatables and its plugins and extras are really great.
In order to navigate from the table to some detailed page, I added a hidden column with a URL for each row and a click event listener in the fnDrawCallback (unless the td has a rowselect class).
Here is the callback code:
"fnDrawCallback": function(oSetting) {
   $(oSetting.aoData).each(function(index, element){
	var colLienIndex = 2 ; 
	$(element.nTr).children('td:not(:has(.rowselect))').unbind('click');
	$(element.nTr).children('td:not(:has(.rowselect))').click(function(event){
	  if (event.ctrlKey)
	    window.open(element._aData[colLienIndex]);
	  else
	    location.href = element._aData[colLienIndex];
	});
   });
},
And here is a sample of the aaData:
[ "Dussillols Corinne","2255383","?mod=prestations&view=facture&action=detail&id=9","Pharmacie Agen Sud","AGEN","0,00","0,00","0,00"],
[ "Wagner Philippe","","?mod=prestations&view=facture&action=detail&id=10","Pharmacie de la Place ","FALCK","0,00","0,00","0,00"],
[ "Antoine Monique","2146974","?mod=prestations&view=facture&action=detail&id=11","Pharmacie Antoine-Appel","SARREGUEMINES","0,00","0,00","0,00"]
As I have now lots of columns, I added the good FixedColumns extra.
The problem is that the left fixed column is not part of the nTr nodes.

So, I thought to add some code in the fixed columns fnDrawCallback itself but I don't know how to link with to the extra data stored in the hidden column.

Would someone have an idea ?


Thank you.
↧
Search

Using fnOpen with selector toggle - what am I doing wrong?

March 28, 2013, 10:46 am
$
0
0
The following code works by clicking on the TR to extend another TR with any data. Great! But when I change the $('#example tbody tr').click() selector to something more specific in such as '#example tbody tr td.myclass a' the function fails. What am I missing. No doubt it has to do with the "this".

$(document).ready(function() {
  var oTable;
   
  // 'open' an information row when a row is clicked on
  $('#example tbody tr').click( function () {
    if ( oTable.fnIsOpen(this) ) {
      oTable.fnClose( this );
    } else {
      oTable.fnOpen( this, "Temporary row opened", "info_row" );
    }
  } );
   
  oTable = $('#example').dataTable();
} );
↧
↧

Wrong section sorry

March 28, 2013, 1:11 pm
↧

Server side processing with vbscript

March 29, 2013, 1:19 am
$
0
0
Hi everyone.
I am using datatables in classic asp. I would like to use server side processing for loading the table with data. I found this link and http://www.datatables.net/development/server-side/asp_classic and I change only the names, the queries and the connection to the db. Data is being loaded ok, but when I click to the last page of data I am receiving a message proccessing until forever. After that if I try to reload the page I am receiving an error
"A trappable error (C0000005) occurred in an external object ajax" .

Search is working ok.Also I select to show me all the results (which are less tha 100) the data are loaded ok.
Could you please help me?
Thanks
↧

dataTable not loading aaData parameter

March 29, 2013, 11:18 am
$
0
0
So the table is on the page

<table width="100%" id="ticketListTable" class="genmed"></table>

I then use AJAX to return the data

		$.ajax({
			type: 'POST',
			url: "ticketAjax.php",
			data: '&m=swapTicketList',
		    dataType: "json",
			success: function(resultData) {
				$('#ticketListTable').dataTable({
					"aaData": resultData,
					"aaSorting": [[0, "desc"]],
					"bJQueryUI": true,
					"bScrollInfinite": true,
					"bScrollCollapse": true,
					"bDestroy": true,
					"bDeferRender": true,
					"iDisplayLength": 100,
					"sScrollY": "1000px",
					"sDom": "Rlfrtip",
				});
			}
		});

The AJAX is working and returning

[{"ID":["17316","17314","17313","17312","17311","17310","17309","17308","17307"....

However aaData is not populating the table with that Json data. Am i misunderstanding how this works? I have read quite a few forums and posts and they all appear to lead to this type of usage.
↧
↧

Adding buttons before "records per page" drop-down

March 29, 2013, 12:53 pm
$
0
0
Hi,

I am new to DataTables and still trying to understand sDOM settings. I wanted to add two buttons just before the "records per page" drop-down menu, in the same line on the left-hand side. I am using bootstrap + datatables

I tried multiple combinations, but no luck. The nearest I can reach is with the following settings, but in this case button is coming on top of "records per page" drop-down

"sDom": "<'row-fluid'<'span6'Tl><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"

Please help.

Thanks
Viji
↧

Datatables with twig

March 29, 2013, 6:13 am
$
0
0
Hi everyone,

I have a symfony2 project with twig as template engine. I'm developing my CRUD pages with datatables 1.9.x. I'm using it to display all records and in every row I'm adding non-database columns to insert edit and delete links. So far, so good. The problem is when I'm using the path() method to create an edit/delete link I need to give the id, but twig is Server-side and DT is client-side. My workarround was the following:


 
{% block content %}
	{% javascripts '@KomdevAdminBundle/Resources/public/js/datatable/jquery.dataTables.min.js' %}
    	<script type="text/javascript" src="{{ asset_url }}"></script>
	   	<script type="text/javascript">
		   	$(document).ready(function() {
		   	    var oTable = $('#usersTable').dataTable({
			   	 	"bProcessing": true,
			   	 	"bServerSide": true,
			                "sAjaxSource": 'ajax/fetch_users',
			                "iDisplayLength": 10,
			               "aoColumns": [
			                      { "mData": 0, "sWidth": "5%"},
			                      { "mData": 3 },
			                      { "mData": 2 },
			                      { "mData": 1 },
			                      { "bSortable": false, "fnRender": function(parent) { //HERE IS THE NON-DATABASE COLUMN
				                      	return '<a id="show" href="' + "{{ path('komdev_admin_users_show', {'id': 'REPLACE'}) }}" + '">Show</a> / <a id="del" href="' + "{{ path('komdev_admin_users_delete', {'id': 'REPLACE'}) }}" + '">Delete</a>';//I PUTTING THE 'REPLACE' STRING TO MARK WHERE I MUST REPLACE THE ID WHEN I'M RENDERING THE DT
				                      }},
			        			]
			   	 });

		   		$('#usersTable').on('click', 'tr', function(e) { 
		   		 	e.preventDefault();
		   		 	var id = oTable.fnGetData(this)[0];
			   		var data = oTable.fnGetData(this)[4];
					data = data.replace(/REPLACE/g, id);//HERE I REPLACE ALL 'REPLACE' STRING OCURRENCES. AT THIS POINT EVERYTHING IS WORKING FINE
					alert(data)
					alert(oTable.fnGetData(this)[4]);
                                        //I NEED TO INSERT data VAR WITH THE REPLACED VALUES ON COLUMN 4 AND I DON'T KNOW HOW TO DO IT!!
			   	});

			   	 $("input").keyup( function () {
			 		/* Filter on the column (the index) of this element */
				 	oTable.fnFilter( this.value, $("input").index(this) );
			 	} );
		   	} );

	   	</script>
	{% endjavascripts %}


I you was patient enough to see this code, you will see that I'm failing at insert the replaced html in the column 4 in every row.

Someone could help me?
Thanks in advance.
Yeipis
↧

webbrowser control strips "&" character when invoking fnAddData() inside explorer webbrowser control

March 29, 2013, 12:08 pm
$
0
0
Hi,

I'm using v1.9.4. When running the code in any browser, everything is fine, but when running the code inside our .net I.E. webbrowser control (versions 8, 9 or 10) the "&" character is being stripped inside fnAddData().

e.g.

// gItem[6] is equal to "P&G"

var lRowData = gTableInstanceList.fnAddData([gItem[0], gItem[1], gItem[2], gItem[3], gItem[4], gItem[5], gItem[6], gItem[7], gItem[8], gItem[9], gItem[10], gItem[11], gItem[12]], redrawTable);

// The Cell for gItem,[6] displays "P" .
// "&G" is stripped. Only in webbrowser control. All other browsers display "P&G"

Has anyone else come across this ? Any suggestions ?

Thanks,

Craig.
↧
Search

[urgent] Support request for date range filtering

March 29, 2013, 11:59 am
↧
↧

Init datatables on nested tables with fnIsOpen

March 29, 2013, 8:42 pm
$
0
0
Hey Alan,

I find that when I put a second init of datatables for the nested table container I don't see the datatables script applied to the nested tables. Is this due to the fact that the nested tables are not present when the page js loads? How can I get around this?

button is clicked to show nested table:

$('#example1 tbody tr td.attendees a').click( function () {
				    if ( oTable.fnIsOpen( this.parentNode.parentNode ) ) {
				      oTable.fnClose( this.parentNode.parentNode );
				      // change value of text in button to be "show"
				    } else {
				    	
				    	oTable.fnOpen( 

				      		this.parentNode.parentNode,

nested table init:

$('.info_row .attendee-table').dataTable( {

					'sDom': '<\"events-filters\"f><\"clear\">rtli',

					'bSort': true,

		            'bPaginate': false,

			        "sScrollX": "100%",

			        "sScrollXInner": "110%",

			        "bScrollCollapse": true
			    });

Ultimately I would like to load all the nested tables immediately so I can search on them using the parent table search box. Please use my remaining credits to assist with this.
↧

Bad sorting "sType": "html" on Android device

March 31, 2013, 10:39 am
$
0
0
My initialization:
$(document).ready(function() {
  $('#example').dataTable( {
     "sPaginationType": "full_numbers",
      "bStateSave": true,
       "aLengthMenu": [[10, 30, 50, 100,-1], [10, 30, 50,100, "All"]],
	"fnDrawCallback": function ( oSettings ) {
		var that = this;
 	        /* Need to redo the counters if filtered or sorted */
		if ( oSettings.bSorted || oSettings.bFiltered )
		{
		this.$('td:first-child', {"filter":"applied"}).each( function (i) {
		that.fnUpdate( i+1, this.parentNode, 0, false, false );
		} );
		}
		},
		"aoColumnDefs": [
		{ "bSortable": false, "aTargets": [ 0 ] },
                { "sType": "numeric", "aTargets": [ 3] }
		],
		"aaSorting": [[ 2, 'desc' ]] 
		} );
		} );

Second column my table contains HTML link this type:
<a href="http://www.waymarking.com/users/profile.aspx?f=1&guid=
1d0052f6-913a-4989-b61e-3824b2af1221&mypage=1&gt=2">8Nuts MotherGoose<a/>

When I run my table (http://members.chello.cz/arozehnal/gc/profiles/wm/top_1000.html) on PC (IE 9. Firefox)
everything works fine. On my Android4 (Chrome, stock browser) device sorting second column works very strange.
I tried to add:
{ "sType": "html", "aTargets": [ 1] }
but sorting on Android works same bad :-(.

Anythning help? Thanks.
↧

Only one tabletools button works.

March 8, 2013, 10:08 am
$
0
0 
$(document).ready( function () {
				$('.display').dataTable( {
					"bJQueryUI": true,
					"iDisplayLength": 50,
					"sPaginationType": "full_numbers",
					"sDom": '<"H"lfTr>t<"F"ip>',
					"oTableTools": {
						"aButtons": [
							"print", 
							"csv", 
							"pdf"
						]
					}
				});
			});

The only button that is working is the "print" button the csv or pdf dont.

my website is local host so I used the debugger

http://debug.datatables.net/azanax
↧

Uncaught TypeError: Cannot read property 'className' of undefined

March 31, 2013, 8:27 am
$
0
0
when apply DataTables to the table with a row 'colspan = 7' below, an Error occured: Uncaught TypeError: Cannot read property 'className' of undefined. (I have try it in "DataTables live" and debugger: http://debug.datatables.net/ahiyey)

HTML:
<table id="result_table" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th width="20px">#</th>
<th>id</th>
<th>stream</th>
<th>dir</th>
<th>plate</th>
<th>time</th>
<th>detail</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7" class="warning">isok?</td>
</tr>
</tbody>
</table>
↧
↧

Update TypeError: Cannot set property '_aData' of undefined ( + jsfiddle)

March 31, 2013, 7:39 am
$
0
0
Hi everyone!
I've just started using the DataTables 1.9.4, and found this issue on a (possibly) simple thing for you.
If you run this code on this page, http://jsfiddle.net/HEDvf/524/ , you will get the error shown on the subject of this page. Note that I've loaded all files needed for displaying the table along with bootstrap (as in the website example).

The init code is at the javascript frame.

Here are my questions:
1. I want to update the entire datatable, (var dtable), whith a new array of data. Why isn't this code working?
2. Since I want to replace the entire table multiple times, should I better use 'fnDestroy' so as to clear memory? Otherwise, will fnUpdate NOT leak any memory of not-needed data?

Thank you in advance! :)
↧

Sorting on the decimal values are not working

March 21, 2013, 11:18 am
$
0
0
I have created the table with the data table 1.9 but my 
  sType": "formatted-num"
is not working for me

i have created jsfiddle http://jsfiddle.net/hALDK/19/


The column Header
BRR
is not sorting.

i am using 


$(document).ready( function() {
  $('#myTable').dataTable( {
    "sPaginationType": "full_numbers",
    "aoColumns": [null,null,null,null,null,null,null,null,{ "sType": "formatted-num" },null] 
  } );

} )
↧
Search

Problem when single record returned

April 1, 2013, 12:11 pm
$
0
0
I couldn't find an answer to my particular problem but basically, dataTables seems to be puking when my service call returns only one record. I see the JSON response to the request and it looks valid to me.

{"iTotalRecords":6,"iTotalDisplayRecords":1,"sEcho":9,"aaData":[["1/20/2013 7:00 PM","18225230","Test Data","Test","Test"]]}

But it gets stuck on Processing and doesn't redraw the table. Not sure what the culprit is for sure but if I console.log the return data when there is only a single record, nothing happens, otherwise I get the object output as expected.

Any ideas?
↧

Another sSearch_n question ...

April 1, 2013, 1:49 pm
$
0
0
Hi!

I'm having an issue where the search values from two different columns are being sent in the same sSearch_n parameter.

This had been working so I've undoubtedly broken it with recent changes.

I've gone through my table html and initialization code and can't find the culprit.

If you could peruse my set up at http://jsfiddle.net/mctocci/AtnVL/4/ and offer any suggestions as to what I could look at I'd appreciate it.

The columns Resource.Group.Name and Resource.ResourceString are both sent to fnFilter as iColumn=3.

Thanks!
↧
↧

Solution::for Ajax autoload

April 1, 2013, 7:03 pm
$
0
0
Hello,

I solved the problem with ajax autoload by applying this 'hack'.

    $(document).ready( function() {
        $(window).bind('focus', function() {
            oTable.fnFilter('',0);
        });
    });

Now when user triggers 'focus' event on 'window', DataTables trying to perform an empty search which leads to AJAX autoload and displaying the data.
In my case I have search enabled for every column in a table, '0' is very first column.
In case you want to search using a Global search (not so efficient), just remove the '0' - oTable.fnFilter('')

If you don't like the hack, please look at this API - http://datatables.net/plug-ins/api#fnReloadAjax

P.S. Worked for me with DataTables 1.9.4

BR,
t0m
↧

Modifying total in the footer after user used searchbox

April 2, 2013, 2:18 am
$
0
0
I have created a datatable and displaying total of some columns in the footer using fnFooterCallback function.
Now the issue is that I want to recalculate the total value after user puts some serach string in the default search box and based on that some rows are filtered. Please help me on this.
↧

Fixed Column Datatable with Select Tag

April 2, 2013, 5:11 am
↧
Viewing all 1816 articles
Browse latest View live
Search