Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 82721 articles
Browse latest View live
↧

Hidden row details example is using a removed jQuery function

April 4, 2014, 10:32 am
$
0
0
Just a quick fyi, the hidden rows example (http://datatables.net/examples/api/row_details.html) is using the .live jquery function which was removed in 1.9 (http://jquery.com/upgrade-guide/1.9/#live-removed). Not a big deal, it can just be replaced with .on, but I thought you might want to know.

.live() removed

The .live() method has been deprecated since jQuery 1.7 and has been removed in 1.9. We recommend upgrading code to use the .on() method instead. To exactly match $("a.foo").live("click", fn), for example, you can write $(document).on("click", "a.foo", fn). For more information, see the .on() documentation. In the meantime, the jQuery Migrate plugin can be used to restore the .live() functionality.
↧
Search

100% table width does not work

April 4, 2014, 8:51 am
$
0
0
Hi,

I'm using the latest release and I cannot make the table header to be 100% and dynamically resized with the window. I found this example: http://datatables.net/release-datatables/examples/basic_init/flexible_width.html, which is quite useless because it doesn't give any indication as what was the html before the code was executed which is true for all the examples, btw. I added width attribute to the table with a value of 100%, I also added style with width set to 100%. I tried enabling/disabling bAutoWidth. I'm creating a table with the fnServerData, so the HTML is just this:

        <table id="table" width="100%">
            <thead></thead>
            <tbody id="tableBody"></tbody>
        </table>

and I add all the rows later. When I generate the columns that I pass as aoColumns to the constructor, I don't give width to any of the columns. Later, I want to specify the width of some of the columns but I would like to see a working example. I see that it is working if I don't pass sScrollY which I need so that the table is scrollable.

Example: http://fiddle.jshell.net/ZGyuA/1/

DataTables debugger: http://debug.datatables.net/ivuxix

How can I fix this issue?

Thanks.
↧
↧

Looping through an array of json objects

April 4, 2014, 2:32 pm
$
0
0
I have JSON object returned by AJAX call like below

{
"aaData":[
{"type":"type1","ratings":[
{"date":"01-Jul-2013","rating":"A","ratingType":"FLT"},
{"date":"02-Jul-2013","rating":"B","ratingType":"LLT"},
{"date":"03-Jul-2013","rating":"C","ratingType":"MLT"},
{"date":"04-Jul-2013","rating":"D","ratingType":"NLT"}]},

{"type":"type2","ratings": [

{"date":"05-Jul-2013","rating":"AA","ratingType":"RT1"},
{"date":"06-Jul-2013","rating":"BB","ratingType":"RT2"},
{"date":"07-Jul-2013","rating":"CC","ratingType":"RT3"},
{"date":"08-Jul-2013","rating":"DD","ratingType":"RT4"}]}
]
}

I need to draw the data table like below using the above JSON object. JSON object may have n number of types.

type1
Date Rating Rating Type
1-Jul-13 A FLT
2-Jul-13 B LLT
3-Jul-13 C MLT
4-Jul-13 D NLT
type2
Date Rating Rating Type
5-Jul-13 AA RT1
6-Jul-13 BB RT2
7-Jul-13 CC RT3
8-Jul-13 DD RT4

Please let me know how to loop the above JSON object and display the columns.
↧

Clustered Table / subtotal sorting help

April 3, 2014, 6:57 am
$
0
0
http://live.datatables.net/bomogov/1/edit?html,js,output

What I'm trying to do is create a table with subtotal rows contained internally, and have each section sort independently. For example, lets say I want to look at my inventory, and have shortages separated from surpluses. I want the shortages in one section, with a subtotal, and the surpluses the same way. Each of those sections should sort independent of the other, with the subtotals remaining at the bottom of the respective sections.

I've come up with some expanded sort methods to handle this, but I'm finding that they function inconsistently. The first time you perform a sort on the page, it will sort correctly, but any subsequent sorts will not sort properly (although the items stay in their proper sections, and the subtotals do not move). This is the case even if the sort is a repeat of the original sort.

$.fn.dataTableExt.afnSortData['clustered'] = function(oSettings, iColumn)
{
	//iColumn = item_table.fnColumnIndexToVisible(iColumn);
	var aData = [];
	$('td:eq(' + iColumn + ')', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
		aData.push(this.parentNode.getAttribute('grouping') + ' ' + this.parentNode.getAttribute('rowtype') + ' ' + this.innerHTML);
		
	} );
	return aData;
}

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "clustered-numeric-pre": function ( a ) {
	var a_fields = a.split(' ');
	var a0 = parseInt(a_fields.shift());
	var a1 = a_fields.shift();
	var a2 = a_fields.join(' ');

	switch(a1) {
		case "head": a1 = 1; break;
		case "body": a1 = 2; break;
		case "foot": a1 = 3; break;
		default: a1 = 4;
	}

	a2 = (a2=="-" || a2==="") ? 0 : a2*1;
        a2 = parseFloat(a2);
        return [a0, a1, a2];
    },
 
    "clustered-numeric-asc": function ( a, b ) {
	if (a[0] != b[0]) {return a[0] - b[0];}
	if (a[1] != b[1]) {return a[1] - b[1];}
	return a[2] - b[2];	
    },
 
    "clustered-numeric-desc": function ( a, b ) {
	if (a[0] != b[0]) {return a[0] - b[0];}
	if (a[1] != b[1]) {return a[1] - b[1];}
	return b[2] - a[2];	
    },
  
    "clustered-string-pre": function ( a )
    {
    var a_fields = a.split(' ');
	var a0 = parseInt(a_fields.shift());
	var a1 = a_fields.shift();
	var a2 = a_fields.join(' ');

	switch(a1) {
		case "head": a1 = 1; break;
		case "body": a1 = 2; break;
		case "foot": a1 = 3; break;
		default: a1 = 4;
	}
                  
    if ( typeof a2 != 'string' ) {
           a2 = (a2 !== null && a2.toString) ? a2.toString() : '';
        }
        return [a0, a1, a2.toLowerCase()];
    },

    "clustered-string-asc": function ( x, y )
    {
    if (x[0] != y[0]) {return x[0] - y[0];}
	if (x[1] != y[1]) {return x[1] - y[1];}
    return ((x[2] < y[2]) ? -1 : ((x[2] > y[2]) ? 1 : 0));
    },

    "clustered-string-desc": function ( x, y )
    {
      if (x[0] != y[0]) {return x[0] - y[0];}
	  if (x[1] != y[1]) {return x[1] - y[1];}
      return ((x[2] < y[2]) ? 1 : ((x[2] > y[2]) ? -1 : 0));
    }


} );

Any ideas on what isn't working right with this?
↧

sAjaxSource

April 4, 2014, 3:34 pm
$
0
0
How can I find information returned by sAjaxSource ??
↧
↧

Get Column Names from Datatable

April 4, 2014, 5:30 pm
$
0
0
We are using dataTables 1.10, and we want to get an array of columns in a dataTable and their names. We want to append those names to a 
<select>
element.

Here is what we have so far:

                 /**
		 * Add individual option elements for each column in full table
		 */
		FullTable.prototype.initColumnFilter = function () {
			if (this.$columnFilter.length > 0) { // if the selector works...
				var tableColumns = this.$tableContainer.dataTable().api().columns(),
					html;
				for (var i = 0; i < tableColumns.length; i++) {
					html += '<option>' + i + tableColumns[i].sTitle + '</option>';
				}
				var $columnSelect = this.$columnFilter.find("#tableColumnFilter").append(html);
			}
		}

This will output 
0undefined
as the only option element in the select.

Thanks in advance.
↧

fnDraw Not Updating Table Contents

April 4, 2014, 5:36 pm
$
0
0
We are trying to update the contents in a dataTable when a javascript array changes, but fnUpdate is not working and appears to be depreciated. We would like to know the correct way to do this.

Currently, we have:

$("body").on("table-updated") { 
  this.table.fnDraw(true);
}

Thanks in advance.
↧

Adding and Deleting row

April 4, 2014, 5:46 pm
↧
Search

Tips and Tricks on how to handle more than 15+ column

April 5, 2014, 3:23 am
$
0
0
Just I want to ask if there is a feature of DataTables that handles many columns? My column is 21 in total which is too much for a medium size screen to display it has a vertical scroll which is a bit ugly. Thank you in advance.
↧
↧

CSS issue with Chrome/Safari/IE

April 5, 2014, 12:38 am
↧

Buttons not working - swf found

April 5, 2014, 4:37 am
$
0
0
Hi all,

I'm trying to use TableTools on my table - I don't get any 404s, so the SWF is found, but the only button that works is the print one. My HTML imports are as follows:

<link rel="stylesheet" type="text/css"
	href="<spring:url value="/resources/css/jquery.dataTables.css"/>" />
<link rel="stylesheet" type="text/css"
	href="<spring:url value="/resources/css/jquery.dataTables.yadcf.css"/>" />
<link rel="stylesheet" type="text/css"
	href="<spring:url value="/resources/css/TableTools.css"/>" />
<script type="text/javascript"
	src="<spring:url value="/resources/js/jquery/jquery-1.8.2.js" htmlEscape="true" />"></script>
<script type="text/javascript"
	src="<spring:url value="/resources/js/jquery/jquery.dataTables.min.js" htmlEscape="true" />"></script>
<script type="text/javascript"
	src="<spring:url value="/resources/js/ZeroClipboard.js" htmlEscape="true" />"></script>
<script type="text/javascript"
	src="<spring:url value="/resources/js/TableTools.min.js" htmlEscape="true" />"></script>
<script type="text/javascript"
	src="<spring:url value="/resources/js/helperTable.js" htmlEscape="true" />"></script>

while my JS code is as follows:

					var oTable = jQuery('#helperTable').dataTable({
						"sDom": 'T<"clearfix">lfrtip',
						"aLengthMenu" : [ [ 10, 25, 50 ], [ 10, 25, 50 ] ],
						"bPaginate" : true,
						"bFilter" : true,
						"bSort" : true,
						"bLengthChange" : true,
						"bInfo" : true,
						"bAutoWidth" : false,
						"sPaginationType" : "full_numbers",
						"aaSorting" : [ [ 5, "desc" ] ],
						"aoColumnDefs" : [ {
							"sType" : "date",
							"aTargets" : [ 5 ]
						}, {
							"bVisible" : false,
							"aTargets" : [ 6, 7, 8 ]
						} ],
						"oTableTools": {
							"sSwfPath": "/helpers/resources/js/copy_csv_xls.swf"
						}
					});

I'm also using the YADCF plugin to generate column filtering - might this be conflicting?

Thanks in advance

TrueDub
↧

How can I add a button to the header ?

April 5, 2014, 2:07 pm
$
0
0
I've tried to add a button to the header on my table so that when the table is scrolled the header and the button (in the header) will stay at the top of the page. I'm using the FixedHeader package. When I add the button it is visible but the button doesn't function. It's controlled by some javascript called (floatbox).

Can you take a look at the page and let me know if there is a solution?

This is an example of the button in the header that doesn't work. http://teetimegolfpass.com/ma/golfcourses-xx.php?region=ma

This is an example where the button works but it is located outside of the header.
http://teetimegolfpass.com/ma/golfcourses.php?region=ma

Thanks.
↧

Test post please delete

April 5, 2014, 3:16 pm
↧
↧

Best way to integrate DataTables with an existing client-side js app

April 5, 2014, 6:12 pm
$
0
0
I'm new to DataTables but I'm very impressed with what I see.

I have a js application that does quite a bit of dynamic table manipulation (adding, deleting, restructuring rows) and I have a few questions regarding the use of this tool.

1) What is the best way to integrate DataTables with my existing app? I notice that once I call the constructor and then modify the table with js I get an error. Do I need to close DT before the mods and then call the constructor again?

2) When I use width='100%' DT doesn't seem to limit the table to a containing <div>. Why?

3) If I have the background of a cell highlighted, and then select the header of the column containing that cell. The whole column changes color and overwrites the highlighted cell background. Is there a way to prevent that?

4) My table supports the concept of an "expanded" row. This allows users to click on any row and expand it. The expanded row contains an embedded table that displays additional data. If I try to sort columns while the row is expanded, I get a run-time error. This is understandable because the cells in this row are of a different structure than the other collapsed rows. Could I somehow tap into the click event on the column header and collapse the expanded row before the plugin tries to sort the column?

Thanks
↧

DataTables + Bootstrap 3 enabling horizontal scrolling creates a bug

April 6, 2014, 3:48 am
$
0
0
Hi,

I'm having a problem with DataTables integrated with Bootstrap 3 and horizontal scrolling is enabled

Here is my fiddle ( http://jsfiddle.net/ )

I don't know why the header is not aligned with the body of the table. I tried the solution on previous post with same issue. But It still doesn't work for me.
↧
Search

Datatables 1.10 beta-2 + 1.9.4 / Pagination not working

April 6, 2014, 5:43 am
$
0
0
Hey Allan,

I wanted to be an early adopter of the next to be released 1.10.
I refactored my code to include jEditable but it's quite similar to what used to work with 1.9, in other terms i'm not new to DT :)
So here I go posting my DT script, wondering why pagination won't work with this one...

Context :
Listing translation innerjoined with translations tokens.
Number of total translations and filtered ones is correct as shown below :
Showing 1 to 10 of 10 entries (filtered from 12 total entries)
But pagination shows only one page where a second page is expected for the 2 more translations.
First Previous 1 Next Last

Code:
var oTable = jQuery('#dyntable').dataTable( {
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "{{ path('translations_list') }}",
            "fnServerParams": function ( aoData ) {
                aoData.push( { "name": "table_id", "value": "dyntable" } );
            },
            "sServerMethod": "POST",
            "sPaginationType": "full_numbers",
            "oSearch": {"bRegex": true},
            "aaSorting": [[1,'asc']],
            "aoColumnDefs": [
                { "bSearchable": false, "aTargets": [ 0, -1 ] },
                { "bSortable": false, "aTargets": [ 0, -1 ] }
            ],
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
              /* ... */
            },
            "fnDrawCallback": function () {
                /* Apply the jEditable handlers to the table */
                jQuery('td.editable', this.fnGetNodes()).editable("{{ path('translations_edit') }}", {
                    type      : 'textarea',
                    cancel    : 'Cancel',
                    submit    : 'OK',
                    indicator : '<center><img src="/images/loaders/loader1.gif"></center>',
                    tooltip   : 'Click to edit...',
                    "data": function(value, settings) {
                        /* Convert <br> to newline. */
                        var retval = value.replace(/<br[\s\/]?>/gi, '\n');
                        return retval;
                    },
                    "callback": function( sValue, y ) {
                        var aPos = oTable.fnGetPosition( this );
                        oTable.fnUpdate( sValue, aPos[0], aPos[1] );
                    },
                    "submitdata": function ( value, settings ) {
                        return {
                            "row_id": this.parentNode.getAttribute('id'),
                            "column": oTable.fnGetPosition( this )[2]
                        };
                    },
                    "height": "14px"
                });
            }
	});

Something I'm missing here with 1.10 ? Or is it a know issue ?

Thanks for your time and consideration.

Kev.
↧

abort previous ajax call in datatables 1.10

April 6, 2014, 10:08 am
$
0
0
Hi there,

my previous implementation of the function doing the ajax call is not working in datatables 1.10 to abort the previous ajax call:

// Aborting the previous XHR;
	
    if (settings.jqXHR)
        settings.jqXHR.abort();

	settings.jqXHR = $.ajax({ ... }

how can I get the expected behavior back?

best regards - Jens
↧
↧

destroy() method not working

April 6, 2014, 10:30 am
$
0
0
I'm trying to use the destroy method but it doesn't seem to be working.

alert("creating table")	

	$(document).ready(function() {
		apptDispTable = $('#tbl_appt').dataTable( {
    		     "bDestroy": true
  	       } );
	});     // position 1
		
	$(document).ready(function() {
		try {
			alert("about to destroy")  		// Position 2
  			apptDispTable.destroy();
  		} catch(err) {
			DisplayPropertyNames(err)  	// Position 3	
  		}
	});


Note: apptDispTable is a global variable.

1) Output at Position 2 shows my table created with DataTable functionality overlaid with the "about to destroy" alert box
2) Once the alert box is closed, the destroy() method is called which causes an error that is caught.
3) The error is displayed at position 3 and states: "Object doesn't support this property or method"

Why is this happening?
↧

Excessive use of fnDestroy()?

April 5, 2014, 11:02 pm
$
0
0
Hi everybody.
I have a django site showing more than one table, all with different data from different models in my DB.

The site is divided into different tabs (using the bootstrap nav-bar). Whenever a tab is clicked it hides all the unrelated divs, shows the clicked div, retrieves the data from my django view via AJAX, and then calls the .dataTable() function on that specific table. Pretty straight forward so far.

Each table needed a bit of different treatment, so in my JavaScript code I wrote a generic function that manages to handle all the different scenarios, and whenever a button in the navigation bar is clicked - I call that function and with the given data I create it the way I want.

But then if I click Tab 1, move to Tab 2 and back to Tab 1, I get an alert that the table has already been created (behind the scenes the div was simply hidden....)

What I did was, before the .dataTable() call, I make a .fnDestroy() call, and I end up with something like this -
//Function gets info on how to create that specific table as well
function createDataTable(tableId) {
    $(tableId).dataTables();
}


$('#myBtn').click(function (e) {
    $(tableId).fnDestroy();
    createDataTable(tableId);
    $(this).tab('show')
})
How bad is this? Having this function mess with the DOM behind the scenes every time the user moves to another tab? Does this even matter? Is this a design flaw and I should rethink the way I retrieve the data from the server, or the way I build the datatables? Perhaps I should have a separate function for each table, even if I repeat myself?

Thanks
↧

Twitter Bootstrap Resources

April 6, 2014, 11:59 am
$
0
0
Hello everyone,

My name is Tim and i represent a team of designers determine to bring you the best possible design built on top of Bootstrap.

If you are looking for new products or just inspiration, be sure to check out: http://www.creative-tim.com

We'd love to hear your feedback.

All the best,
Tim
↧
Viewing all 82721 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>