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

Custom style not applying to THEAD tag in IE

$
0
0
I am using DataTables 1.8.2 with jQuery 1.8.3.

I have added a CSS class to THEAD tage for formatting the table associated with the DataTables plugin.
$('thead').addClass("cssClassName");

I can see the applied style in Firefox(16.0.2) but not in IE8. Is there any alternate way to apply the style in both the browsers.

Thanks for any help!

Loading from XML.

$
0
0
Hello,

I'm a programming noob, so please forgive me. I am able to load an HTML table, the contents of which are based on an XML file. However, when I initialize the DataTables, it appears to be rendering strangely. Only the first column is formatted properly, and none of the functions are working with my sample data. Ideas?

Thanks!

Problem getting double controls

pagination and Filter and lengths are not working in IE 8.

$
0
0
I really new to the data table i am writing a table that iterates over a data from the database , it works fine in Firefox, but it does not work in IE8
table grid works but the pagination and filter alignment is completely off, they are wrapping in to multiple lines

i did some research i think it has to do with " dataTables wrapper form inline" but i am not sure how to set this to IE8.


Please help me out.

Thanks
Nand

Multiple SQL injections in server side processing php scripts

$
0
0
The example scripts under /DataTables-1.9.4/examples/server_side/scripts/ have multiple sql injection vulnerabilities.

I don't really like posting this in the open, but I can't see a say to secure it. Since this code is copied verbatim to users' own sites, along with being used in many examples on this site, it's important to get visibility for the issue, once it is fixed.

The main premise is that mysql_real_escape_string() is being used to sanitize parts of the query which are not quoted.-- Meaning that the input strings do not need to terminate a quoted string to do their injection.

The affected files I've found are:
custom_data_property.php:
details_col.php:
id.php:
id_jsonp.php:
jsonp.php:
objects.php:
object_jsonp.php:
post.php:
Line 62: mysql_real_escape_string( $_GET['iDisplayStart'] )
Line 63: mysql_real_escape_string( $_GET['iDisplayLength'] )
Line 79: mysql_real_escape_string( $_GET['sSortDir_'.$i] )

server_processing.php (has the code from 62/63 above, but properly sanitizes input with intval() ):
Line 79: mysql_real_escape_string( $_GET['sSortDir_'.$i] )


filter_col.php:
Line 34: mysql_real_escape_string( $_GET['iDisplayStart'] )
Line 35: mysql_real_escape_string( $_GET['iDisplayLength'] )
Line 45: mysql_real_escape_string( $_GET['sSortDir_'.$i] )



They are being used in this way:
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );


When the input iDisplayLength is sent to the server as something like '1' (no quotes), everything is fine, and this gets generated:
LIMIT 1, 1

When iDisplayLength equals: 1 UNION SELECT * FROM another_table
This string gets generated:
LIMIT 1, 1 UNION SELECT * FROM another_table

I need a complete CRUD sample for Datatable plugin in Asp.net WebApplication (Not MVC, Not WCF)

$
0
0
I am trying to use DataTable Jquery Plugin in my project. But not able to complete the CRUD portion. Any one having a sample project or code snippet or weblink, please share with me.
Regards
Kamaraj.P

How to allow to show '&' symbol when exporting as csv?

$
0
0
Hi....using datatables i am exporting the values as csv but in that value one column has & symbol that is not coming in csv . Example Good & morning is the value then in csv only good is coming, '& morning' is not coming....please suggest some solution.

Multiple tr in aTBody

$
0
0
Hi, I have this table which gets its data from my sql database. I run a jquery function to enable users to view row details upon clicking on an icon. I have 2 <tr> inside my <tbody>. I had given my row details <tr> a class of its own so that the jquery function can call it out. Right now, Data tables isn't showing up.

<table id="tb-1" class="table table-striped datatable" style="width:100%;">
	<thead>
        <tr>
            <th>Nome</th>
            <th>E-mail</th>
            <th>Regiões</th>                                       
            <th>Mensagem</th>
            <th>Data</th>
        </tr>
    </thead>
	<tbody>
		#foreach($invite in $sentInvites)
    		<tr>
                <td><strong>#if($invite.guestName.length() gt 20)<label title="$invite.guestName">$invite.guestName.substring(0,20)...</label>
    						#else
    							$invite.guestName
    						#end
    			</strong></td>
    			<td>#if($invite.guestEmail.length() gt 20)<label title="$invite.guestEmail">$invite.guestEmail.substring(0,20)...</label>
    				#else
    					$invite.guestEmail
    				#end
    			</td>
    			<td>#if($invite.operationRegion.length() gt 25)<label title="$invite.operationRegion">$invite.operationRegion.substring(0,25)...</label>
    				#else
    					$invite.operationRegion
    				#end
    			</td>
    			<td>#if($invite.message.length() gt 30)<label title="$invite.message">$invite.message.substring(0,30)...</label>
    				#else
    					$invite.message
    				#end
    			</td>
    			<td>$date.format("dd/MM/yyyy",$invite.invitationDate)</td>	
            </tr>
			<tr class="tr-mensagem hide">
    			<td colspan="5">
    				<div>Para: $invite.guestName <span>< $invite.guestEmail ></span></div>
    				<div style="margin-bottom:20px;margin-left:150px" class="txt-mensagem">$invite.message</div>
    				<div style="margin-left:150px">
    					<div style="float:left;">
    						$invite.user.name - CRECI: $invite.user.userSalespersonInfo.creci
    					</div>
    				</div> 
    			</td>
    		</tr>     
		#end
    </tbody>
</table>

DataTables warning (table id = 'example'):

$
0
0
Hello!

I have big problem. J spent more time and I can't find soulution. I see still "discusion title" message. Please Help me. In attach code. Greetings i Hepy Christmas and new year!!

html file


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css";
			@import "../../media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/server_processing.php"
    } );
} );

			
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				DataTables server-side processing example
			</div>
			
			<h1>Preamble</h1>
			<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. Basically all of the paging, filtering, sorting etc that DataTables does can be handed off to a server (or any other data source - Google Gears or Adobe Air for example!) and DataTables is just an events and display module.</p>
			<p>The example here shows a very simple display of the CSS data (used in all my other examples), but in this instance coming from the server on each draw. Filtering, multi-column sorting etc all work as you would expect.</p>
			
			<h1>Live example</h1>
			<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th width="20%">ID</th>
			<th width="20%">Numer telefonu</th>
			<th width="20%">SIM</th>
			<th width="20%">PUK/PIN</th>
			<th width="25%">PUK2</th>
			<th width="25%">Adres</th>
			<th width="15%">Miejsce</th>
			<th width="15%">Operator</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>ID</th>
			<th>Numer telefonu</th>
			<th>SIM</th>
			<th>PUK/PIN</th>
			<th>PUK2</th>
			<th>Adres</th>
			<th>Miejsce</th>
			<th>Operator</th>
		</tr>
	</tfoot>
</table>
			</div>
			<div class="spacer"></div>
			
			
			<h1>Initialisation code</h1>
			<pre class="brush: js;">$(document).ready(function() {
	$('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "scripts/server_processing.php"
	} );
} );</pre>
		<style type="text/css">
			@import "../examples_support/syntax/css/shCore.css";
		</style>
			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
			
			<h1>Server response</h1>
			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
			<pre id="latest_xhr" class="brush: js;"></pre>
			
			<h1>Server side (PHP) code</h1>
			<pre>&lt;?php


php server side file


<?php
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * Easy set variables
	 */
	
	/* Array of database columns which should be read and sent back to DataTables. Use a space where
	 * you want to insert a non-database field (for example a counter or static image)
	 */
	$aColumns = array( `Id_wpisu`, `Numer_telefonu`, `SIM`, `PUK/PIN`, `PUK2`, `Adres`, `Miejsce`, `Operator` );


	/* Indexed column (used for fast and accurate table cardinality) */
	$sIndexColumn = "Id_wpisu";
	
	/* DB table to use */
	$sTable = "zestawienie";
	
	/* Database connection information */
	$gaSql['user']       = "root";
	$gaSql['password']   = "....";
	$gaSql['db']         = "kary_sim";
	$gaSql['server']     = "....";
	
	/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
	/*include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );
	
	
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	ect. the same in server procesing file

fnServerData issue

$
0
0
Hi DataTables,

I have an issues where my returned json is failing.

basically its gets to the function as below and fails on

Microsoft JScript runtime error: Unable to get value of the property 'length': object is null or undefined


/* if there is an ajax source load the data */
			if ( oSettings.sAjaxSource !== null && !oSettings.oFeatures.bServerSide )
			{
				var aoData = [];
				_fnServerParams( oSettings, aoData );
				oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aoData, function(json) {
					var aData = (oSettings.sAjaxDataProp !== "") ?
					 	_fnGetObjectDataFn( oSettings.sAjaxDataProp )(json) : json;
		
					/* Got the data - add it to the table */
					for ( i=0 ; i<aData.length ; i++ )
					{
						_fnAddData( oSettings, aData[i] );
					}
					
					/* Reset the init display for cookie saving. We've already done a filter, and
					 * therefore cleared it before. So we need to make it appear 'fresh'
					 */
					oSettings.iInitDisplayStart = iAjaxStart;
					
					if ( oSettings.oFeatures.bSort )
					{
						_fnSort( oSettings );
					}
					else
					{
						oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
						_fnCalculateEnd( oSettings );
						_fnDraw( oSettings );
					}
					
					_fnProcessingDisplay( oSettings, false );
					_fnInitComplete( oSettings, json );
				}, oSettings );
				return;
			} 

Specifically on this section,

/* Got the data - add it to the table */
					for ( i=0 ; i<aData.length ; i++ )
					{
						_fnAddData( oSettings, aData[i] );
					}

Any help would be great

Regards

Michael

selecting row on click of row but not on link click ?

$
0
0
i have my customer dataTable which has five columns. one column contains hyperlink. One of the column is hyperlink.
i want when user clicks on the row, that row should be selected(which means row color should change and checkbox
should be selected). i can do it with below code snippet

$("#customer").on('click', $.fn.getDataTablesClickHandler("#selectAll"));
//where customer is the html div associated with dataTable and call the same function which gets triggered
//on call of selectAll html element. Inside that function i toggle the class of row


It works great. But my problem is i dont want this to happen on click of link inside one of the column.
how i can do this?

HTML Filtering example no longer working

$
0
0
I found this link:
http://datatables.net/examples/advanced_init/html_sort.html

by following the comments in this thread:
http://www.datatables.net/forums/discussion/807/how-to-filter-excluding-certain-columns-or-filter-only-on-text-content-not-html-tags-within-cells/p1

I tested in the latest versions of Chrome and Firefox and it seems like the filtering is not using just the text in the Link column. For example, if you search for "href", all of the rows remain in the table. I have seen the same behavior in my projects as well. Is this a bug, or am I just missing something?

Thanks,
Rich

fnGetData does not return the data in right order after column sorting in jquery DataTable?

$
0
0
i am using jquery dataTable for displaying customer records. First time i go to customer page,i have 20 customer records in dataTable sorted by
customerId column( so they are diplayed starting from 20 to 1 where 20 is the id of 20th customer and 1 is the id of first customer) in desc
order. 20th customer is shown at top in dataTable.

now if do below in my javascript code

   
var customerTable=$('#customer').dataTable();// where customer is the html div associated with dataTable

 var custData = customerTable.fnGetData(18)// it gives me data of 19 row in dataTable( as dataTable index starts from 0)
     // so i get the data of customer having customer id=19
  

Perfectly fine till here.

Now i click the sorting icon on customerId column . So after sorting customer with id as 1 is displayed on top in dataTable and customer with id as 20
will be displayed at bottom. Now i do the my javascript opration again

 var customerTable=$('#customer').dataTable();

 var custData = customerTable.fnGetData(18)
     // it should give me data for customer id=2 Right? but still i am getting the old data i.e customer Data having id=19.
  

i am not getting why i am not getting the right data after sorting? how should i get the correct data with row id after dataTable
sorting?

mdata with function on multiple columns

$
0
0
Hello,
I need to individually change rendering of three columns values adding span tags and leave original values intact for sorting purposes.
So I tried to apply mData functions on multiple columns, like this:

{ 'aTargets': [ 2 ],  
                                'mData'    : function(source, type, val) {
                                                if ('set' === type) 
                                                {
                                                    source[2] = Number(val);
                                                    source.rendered = '<span class="indicator"><span title="' + ((0 === source[2])? realTimeMonitor.fault0Title : (source[2] + ' ' + realTimeMonitor.fault1Title)) + '" class="' + ((0 === source[2])? 'green' : 'red') + '"></span></span>';
                                                    return;
                                                }
                                                else if('display' === type || 'filter' === type) 
                                                {
                                                    return source.rendered;
                                                }
                                                
                                                return source[2]; }
                              },
                              { 'aTargets': [ 3 ],
                                'mData'    : function(source, type, val) {
                                                if ('set' === type) 
                                                {
                                                    source[3] = Number(val);
                                                    source.rendered = '<span class="indicator"><span title="' + ((0 === source[3])? realTimeMonitor.threshold0Title : (source[3] + ' ' + realTimeMonitor.threshold1Title)) + '" class="' + ((0 === source[3])? 'green' : 'red') + '"></span></span>';
                                                    return;
                                                }
                                                else if('display' === type || 'filter' === type) 
                                                {
                                                    return source.rendered;
                                                }
                                                
                                                return source[3]; }
                              },
                              { 'aTargets': [ 4 ],
                                'mData'    : function(source, type, val) {
                                                if ('set' === type) 
                                                {
                                                    source[4] = Number(val);
                                                    source.rendered = '<span class="indicator"><span title="' + ((0 === source[4])? realTimeMonitor.network0Title : ((1 === source[4])? realTimeMonitor.network1Title : realTimeMonitor.network01Title)) + '" class="' + ((0 === source[4])? 'grey' : ((1 === source[4]) ? 'green' : 'red')) + '"></span></span>';
                                                    return;
                                                }
                                                else if('display' === type || 'filter' === type) 
                                                {
                                                    return source.rendered;
                                                }
                                                
                                                return source[4]; }
                               }

My problem is that third mData definition somehow overwrites the previous ones so my table displays third column rendering in the previous ones; moreover only the first columns is sorted correctly.

Could you address me to the mistake I'm doing?

Thanks in advance for your kind answers.

New to dataTables - Initialize and load data question

$
0
0
I am retrieving JSON using the JQuery $.ajax({ }) call and I am receiving the JSON back to the JSP page. I have created the html for the table in my JSP page as follows:

<table id="example">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>

</tbody>
</table>

I have included the JQuery and dataTable links for CSS and JS

In my JQuery - I do the following:

$(document).ready(function() {

var aaData=[];
aaData.push({
"ID": "1000",
"Name": "Mike"
});
aaData.push({
"ID": "11000",
"Name": "Jim"
});
aaData.push({
"ID": "12000",
"Name": "John"
});

$('#example').dataTable( {
"aaData": aaData,
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});

});

I receive NULL values in my table. Does anyone know why the data will not paint?
I was only creating the array on the front end to test the load. I have JSON coming
back to the front-end I will load once I figure out the issue. Am I missing something?

I am seeing the table with the JQuery theme but no data except NULLs and a dialog that appears stating:
DataTables warning (table id = 'example'): Requested unknown parameter '0' from the data source for row 0.

Can anyone help? Thank you

jQuery version question: enum plugin (test case included)

$
0
0
Hi, I'm trying to use DataTables and the enum plugin to sort by "times" which include values like "30 minutes" "1 hour" "9 months" etc. The table works as expected except that now that I've added the enum sType to the column, it doesn't sort at all.

I'm suspecting that my version of jQuery is the culprit: I'm stuck on 1.4.4 in a CMS system that relies on that specific version for it's working. The enum code and sorting works on the DataTables live site: http://live.datatables.net/igetej/2/edit#javascript,html,live

Have I messed up something in the code or is this not going to work with jQuery 1.4.4? Thanks!

Update the datatable properties with the json data and redraw the table after a ajaxcallback

$
0
0
I am improving with datatables but i need a bit of help.
Maybe i am wrong, but i didnt find datatables examples working with Json data ( from server side processing ) not being the default data ( sEcho, iTotalRecords, iTotalDisplayRecords, aaData, [aoColumns] ) like
var debug;
...

"fnServerData": function ( sUrl, aoData, fnCallback, oSettings ) {
			oSettings.jqXHR = $.ajax( {
				"url":  sUrl,
				"data": aoData,
				"success": function (json) {
					if ( json.sError ) {
						oSettings.oApi._fnLog( oSettings, 0, json.sError );
					}

					$(oSettings.oInstance).trigger('xhr', [oSettings, json]);
					// MYCODE a simple example, i pass sTitle ( Columns titles ) on the json
					for (var property in json){
						if ( property == "aoColumns"){
							for (var aoColIndex in json["aoColumns"]){
								oSettings["aoColumns"][aoColIndex]["sTitle"] = json["aoColumns"][aoColIndex]["sTitle"];
							}
						}
					}
					//oSettings.oApi._fnAjaxUpdateDraw( oSettings, json);
					//oSettings.oApi._fnDraw( oSettings );
					debug["oSettings"] = oSettings;
					// ENDMYCODE it works but datatable isnt drawed
				},
				"dataType": "json",
				"cache": false,
				"type": oSettings.sServerMethod,
				"error": function (xhr, error, thrown) {
					if ( error == "parsererror" ) {
						oSettings.oApi._fnLog( oSettings, 0, "DataTables warning: JSON data from "+
							"server could not be parsed. This is caused by a JSON formatting error." );
					}
				}
			} );
		},
...
console.log( debug );

I think i know how pass the json, with the new properties data, and change the datatable properties with the new one, but datatable isnt draw/printed/refreshed.

I follow the right steps ?
I will change this code for a function that allow me to parse data from json and store on datatable.oSettings.
					for (var property in json){
						if ( property == "aoColumns"){
							for (var aoColIndex in json["aoColumns"]){
								oSettings["aoColumns"][aoColIndex]["sTitle"] = json["aoColumns"][aoColIndex]["sTitle"];
							}
						}
					}
Maybe u can tell me if there is already a funtion to do this.
I checked JQuery.dataTables.js library and i found many functions and things there but didnt find a function to do this.
But dont know, maybe i didnt see it.
I am a bit lost. I need some advices to do this.

I found "fnDrawCallback" and "fnPreDrawCallback" but still dont get it :(

Fill aoColumns by AJAX call

$
0
0
I'm trying to create a parametric datatables app (getting all columns property from database table) and i like also to hide columns names (i don't want to see column name in JS source code)
In order by to reach my target i'm trying to get columns properties by AJAX call.
I've already read these 2 threads:
1) http://www.datatables.net/forums/discussion/3519/getting-column-names-from-ajax-source/p1
2) http://datatables.net/forums/discussion/3442/x&page=1#Item_10

Allan suggests a method that allows to realize all this by a single AJAX call.
This is very good, but I'd like to understand a little matter.
See the code:
"aoColumnDefs": [
         {
        	 "aTargets": [ 0, 1, 2, 3, 4, 5 ],
         	 "mData": function (source, type, val) { // this function runs roughly 1250 times: my table have 40 rows and 6 columns
        	    var oooo = source;
                    var str="";
                    for(var key in oooo){ str+=key+" : "+oooo[key]+"\n"; };
                    alert(str);        
        	 }
         }
]

When i watch "str" string i can see table fields names (and its value), e.g.:
id_item : SD584
height: 20
width:30

For example, if i change id_item in database table, i can see new name instead of id_item directly here, in "str" string.
Then i would post my question, if datatables framework already know table fields names, why do i get to request them by an explicit AJAX call ? Why can't i use these values to set "aoColumns" property?

apply basic beahviour on html

$
0
0
Hi ,

does exists a way to apply basic behaviour directly in html.
I would like to say to datatables do not make a column sortable adding an attribute on the html and not being force to apply the behaviour on any column via javascript using aoColumns attribute.

Does exists a way to do this?


Thanks

Andrea

Scrollbar not working in android device

$
0
0
I am using the data Table library to show a table with pagination and scroll bar enabled in my android device. The scrolling works fine when tested on desktop web browser. But if I test it on my android device (using phonegap and jquery mobile) the scrolling doesn't work. Below is the code. Any pointers is highly appreciable.
<code>
<head>
<script type="text/javascript" charset="utf-8"
src="lib/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="lib/js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
</head>
<body>
<div data-role="page" id="TaskListPage">



<script type="text/javascript">
var otable;
function decorateTable(){
otable = $('#demo').dataTable( {

"sScrollY": "350",
"bAutoWidth": true,
"sScrollX": "100%",
"bProcessing": true,
"bPaginate": true,
"bFilter": false
} );
}

//$("#demo tbody tr").click( function (e) {
// var rowData = otable.fnGetData( this );
// alert( 'The row\'s first cell clicked on had the value of '+rowData[0] );
// } );


$(document).on('pageinit','[data-role=page]',function(){
decorateTable();
} );

</script>
<div data-role="content" id="TaskListContent">
<table id="demo">
<thead>
<tr>
<th>Client<br>Name</th>
<th>Desc</th>
<th>Date <br>Recd.</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>12234</td>
<td>test</td>
<td>12-09-2011</td>
<td>New</td>
</tr>
<tr>
<td>34543</td>
<td>abcd</td>
<td>12-09-2012</td>
<td>In Process</td>
</tr>
</tbody>
</table>

</div>
</code>
Viewing all 82207 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>