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

check checkbox select all / unselect all checked

May 8, 2013, 12:52 pm
$
0
0
Hi.
I take so much from this site. that I think I can contribute with this.

Already search for it. Seems like its not yet.
So here my code

//
$(".LINK_OR_BUTTON").click( function(event){
    
      event.preventDefault();
        
      if ( $(":input:checkbox.CLASS:checked", oTable.fnGetNodes()).size() <  oTable.fnSettings().fnRecordsTotal()){
          $(":input:checkbox.CLASS", oTable.fnGetNodes()).attr("checked", "checked");
          $(this).html("[Unselect]").attr("title","[Unselect]");
      } else {
          $(":input:checkbox.CLASS", oTable.fnGetNodes()).removeAttr("checked");
          $(this).html("[Select All]").attr("title","[Select All]");
      }
});

http://live.datatables.net/ihatir/5/

the link can by move/copy anywhere

Hope you like it
↧
Search

Adding a button with click function in drill-down/hidden row

May 8, 2013, 5:04 am
$
0
0
Hi All,

Would someone be able to suggest in this example code : http://www.datatables.net/blog/Drill-down_rows - how can I add a button to the hidden row and attach a function to that buttons click. Basically I have a text area in a hidden row and I want to save its content back to an ajax data source on click.

Donation on the wy! Cheers.
↧
↧

Uncaught TypeError: Object [object Object] has no method 'charCodeAt'

August 10, 2012, 3:23 am
$
0
0
Hi Allan,

Since the update to 1.9.3 I am receiving the following error:
Uncaught TypeError: Object [object Object] has no method 'charCodeAt' on line 3841.

I have uploaded debug info. code: ekazek

Many thanks

Steve
↧

Second page don't works another jquery component

May 8, 2013, 5:03 am
$
0
0
Well, In my datatable I use the ShadowBox Jquery (it's responsible to show some pictures from customers). I have almost 400 records and the DataTable's paginate do its work when share this 400 record in several pages.

The problem is: In the first page my ShadowBox Jquery work normally, but in the second, third, fourth and others different from first, the ShadowBox dont work anymore.

How can i fix this ?
↧

jQuery Datatables, Bulk adding rows with additional attributes

April 26, 2013, 8:25 am
$
0
0
Currently I am adding rows to a datatable like:

$.each(data.data.events, function(i, v)
{
    var tobj = data.data.events[i];
    var dateString = formatStatusDate(tobj.event_ts_begin);
    statusMessageTable.fnAddData([
                                tobj.severity_icon,
                                tobj.event_severity,
                                tobj.type_icon,
                                tobj.event_code,
                                tobj.event_desc,
                                tobj.event_type,
                                tobj.event_text,
                                dateString
                                ]);
    var theNode = statusMessageTable.fnSettings().aoData[i].nTr;
    theNode.setAttribute('data-idn',tobj.event_id);
});
However I have noticed this causes a great strain on the memory if there are more than 100 rows to add. Now I know many of you the first thought is, well why don't you render it via server side script, then apply your datatable logic. To that I say I can't to much of the page is dynamically generated by JS alone, as its mostly a javascript intense application.

So with that I am been trying to figure out a way to add all the rows I need down the line, while retaining the ability to add the attribute like I have being done. I am hoping someone more proficient than me with datatables may be able to help me figure something out, or offer some idea to what I can do to build out a object of sorts that can if possible be passed to the fnAddData function that will allow me at the same time to add that attribute to the parent row being added.
↧
↧

Sorting and filtering problem

May 9, 2013, 1:14 pm
$
0
0
Hello Everyone here,

I am trying to build this server side processing script based on some post I found from other users, but I cannot get the sort and filter function to work. Its been a week now, at the moment for simplicity I use just a simple table, but later I would use join function. If anyone could give me a helping hand why sorting and filtering not working, it would be great.

<?php
	/*
	 * Script:    DataTables server-side script for PHP and MySQL
	 * Copyright: 2010 - Allan Jardine
	 * License:   GPL v2 or BSD (3-point)
	 */
	
	/* * * * * * * * * * * 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) 
     * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
session_start();
if(!session_is_registered(name)){
header("location:login.php");
}
    define('INCLUDE_CHECK',true);
    include 'config.inc.php';
    include 'includes/member_common.php';
    
    $aColumns = array("s.id AS id", "s.start_date AS start_date", "s.days AS days", "s.site AS site");
        
        /*, "a.name site", 
        "b.name guest1", "c.name guest2", "d.name guest3", "e.name guest4"); */
	
	/* Indexed column (used for fast and accurate table cardinality) */
	$sIndexColumn = "s.id";
	
	/* DB table to use */
	$sTable = "schedules s";
	
    // any JOIN operations that you need to do
    $sJoins = "";
    
    /*"LEFT JOIN texchanges a
                on s.site = a.id
            LEFT JOIN texchanges b
                on s.guest1 = b.id
            LEFT JOIN texchanges c
                on s.guest2 = c.id
            LEFT JOIN texchanges d
                on s.guest3 = d.id
            LEFT JOIN texchanges e
                on s.guest4 = e.id";*/

    
   // get or post
   $_METHOD = $_POST;
       
    /* * Paging * */
   $sLimit = "";
   if ( isset( $_METHOD['iDisplayStart'] ) && $_METHOD['iDisplayLength'] != '-1' )
   {
     $sLimit = "LIMIT ".mysql_real_escape_string( $_METHOD['iDisplayStart'] ).", ".
       mysql_real_escape_string( $_METHOD['iDisplayLength'] );
   }
	
	
	/* * Ordering */
   if ( isset( $_METHOD['iSortCol_0'] ) )
   {
     $sOrder = "ORDER BY ";
     for ( $i=0 ; $i<intval( $_METHOD['iSortingCols'] ) ; $i++ )
     {
       if ( $_METHOD[ 'bSortable_'.intval($_METHOD['iSortCol_'.$i]) ] == "true" )
       {
         $sFieldname = $aColumns[ intval( $_METHOD['iSortCol_'.$i] ) ];
         if(strpos($sFieldname, " AS ") == "TRUE") {
           $arr = split(" ", $sFieldname);
           $sFieldname = $arr[2];
         }         
         $sOrder .= $sFieldname . "
           ".mysql_real_escape_string( $_METHOD['sSortDir_'.$i] ) .", ";
       }
     }
     if ( $sOrder === "ORDER BY " )
		{
			$sOrder = "";
		}
   }
	
	/* 
	 * Filtering
	 * NOTE this does not match the built-in DataTables filtering which does it
	 * word by word on any field. It's possible to do here, but concerned about efficiency
	 * on very large tables, and MySQL's regex functionality is very limited
	 */
	$sWhere = "";
    
    /*"WHERE a.userid = $member[id] and a.status = 'Active'";*/
	if ( $_METHOD['sSearch'] != "" )
	{
		$sWhere .= " and (";
		for ( $i=0 ; $i<count($aColumns) ; $i++ )
		{
			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_METHOD['sSearch'] )."%' OR ";
		}
		$sWhere = substr_replace( $sWhere, "", -3 );
		$sWhere .= ')';
	}
	
	/* Individual column filtering */
   for ( $i=0 ; $i<count($aColumns) ; $i++ )
   {
     if ( $_METHOD['bSearchable_'.$i] == "true" && $_METHOD['sSearch_'.$i] != '' )
     {
       if ( $sWhere == "" )
       {
         $sWhere = "WHERE ";
       }
       else
       {
         $sWhere .= " AND ";
       }
       $sFieldname = $aColumns[$i];
       if(strpos($sFieldname, " AS ") !== false) {
         $arr = split(" ", $sFieldname);
         $sFieldname = $arr[2];
       }
       $sWhere .= $sFieldname." LIKE '%".mysql_real_escape_string($_METHOD['sSearch_'.$i])."%' ";
     }
   }
	
	
	/*
	 * SQL queries
	 * Get data to display
	 */
	$sQuery = "
		SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
		FROM   $sTable
        $sJoins
		$sWhere
		$sOrder
		$sLimit
	";
   $sDataQuery = $sQuery;
   $rResult = mysql_query($sQuery) or die(mysql_error());
	
	/* Data set length after filtering */
	$sQuery = "
		SELECT FOUND_ROWS()
	";
	$rResultFilterTotal = mysql_query( $sQuery ) or die(mysql_error());
	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
	$iFilteredTotal = $aResultFilterTotal[0];
	
	/* Total data set length */
	$sQuery = "
		SELECT COUNT(".$sIndexColumn.")
		FROM   $sTable $sWhere
	";
	$rResultTotal = mysql_query( $sQuery ) or die(mysql_error());
	$aResultTotal = mysql_fetch_array($rResultTotal);
	$iTotal = $aResultTotal[0];
	
	
	/*
	 * Output
	 */
	$output = array(
		"sEcho" => intval($_GET['sEcho']),
		"iTotalRecords" => $iTotal,
		"iTotalDisplayRecords" => $iFilteredTotal,
		"aaData" => array()
	);
	
	while ($aRow = mysql_fetch_array($rResult))
	{
		$row = array();
		for ( $i=0 ; $i<count($aColumns) ; $i++ )
		{
            if(strpos($aColumns[$i], " AS ") == true) {
                $arr = split(" ", $aColumns[$i]);
                $row[] = $aRow[$arr[2]];
            }
            elseif ( $aColumns[$i] == "version" )
			{
				/* Special output formatting for 'version' column */
				$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
			}
			elseif ( $aColumns[$i] != ' ' )
			{
				/* General output */
				$row[] = $aRow[ $aColumns[$i] ];
			}
		}
		$output['aaData'][] = $row;
	}
	
	echo json_encode( $output );
    ?>
↧

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>
↧

DataTables hidden row details example code is deprecated

May 10, 2013, 2:19 am
$
0
0
Hi there, i would like to notice that the "DataTables hidden row details example code" is a little wrong because from Jquery 1.7 .live() is deprecated.

If you want, you can use .on() instead of .live() or just copy the js --> http://jsfiddle.net/sep92/1/
↧
Search

Moving the Length Selector into a table construct

May 10, 2013, 9:06 am
$
0
0
Dear community,

What I'd like to do is to create a plain HTML table inside the top of the datatables in order to align further elements (e.g. advanced filter options) in the datatables top.

To get you an idea of what I want to achieve I've uploaded a screenshot of the current state:
http://imageshack.us/photo/my-images/254/advancefilter.png

The textboxes, labels and the search button, all are inside a table. My question now is, how to I achieve that I get the Length element (Show ... entriue) also into a column of the table i've injected into the datatables top?

The code actually looks like this:

oTable = $('#example').dataTable({
                "bJQueryUI": true,
                "sDom": '<"H"l<"searchBarDiv">>t<"F"ip>',
                [...]
});
// contains the table structure
var sSearchBarContent = $('#SearchPersonFAInfoSearchDiv').html();
$('div.searchBarDiv').html(sSearchBarContent);
$('#SearchPersonFAInfoSearchDiv').remove();

During some search I found a ways which allows to completly rewrite the Length Element: https://datatables.net/forums/discussion/13788/request-custom-length-control-plugin-using-instead-of-/p1
But actually I do not want to customize it, but to position e.g. to wrap it by a table.

Hope for further help.

Best regards

Samuel
↧
↧

filtering not working by default?

May 10, 2013, 2:34 pm
$
0
0
I have a Search box displayed above my table by default. When I type something into the search box, no filtering happens.
What am I missing?

        <script type="text/javascript" src="/scripts/jquery/jquery-current.js"></script>
        <script type="text/javascript" src="/scripts/jquery/jquery-ui-current-custom.js"></script>
        <script type="text/javascript" src="/scripts/jquery/plugins/jquery-hotkeys-current.js"></script>
        <script type="text/javascript" src="/scripts/jquery/plugins/jquery.dataTables.js"></script>



In my code:
$('#table_results').dataTable({
                        "bPaginate": false,
                        "bInfo": false,
                        "aoColumns": [
                                { "sType": "string" },
                                null,
                                null,
                                { "sType": "numeric-comma" },
                                { "sType": "numeric-comma" },
                                { "sType": "numeric-comma" },
                                { "sType": "numeric-comma" },
                                { "sType": "numeric-comma" },
                                null,
                                null,
                        ]
                 });

Thanks for any assistance. Driving me nuts and I know i'm just doing something stupid. Sorting is working fine...
↧

Aligning Numeric data

May 11, 2013, 5:13 am
$
0
0
Hi Team ,

I have problem in aligning numeric data , as per my requirement I want numeric data to be aligned right and text left in datatable grid , I have tried using
table.display td {
padding: 3px 10px;
text-align: right;
}
Now the entire data is getting right aligned , I want only numeric data to be right aligned ,
Thanks in advance.
↧

Aligning Numeric data

May 11, 2013, 5:13 am
$
0
0
Hi Team ,

I have problem in aligning numeric data , as per my requirement I want numeric data to be aligned right and text left in datatable grid , I have tried using
table.display td {
padding: 3px 10px;
text-align: right;
}
Now the entire data is getting right aligned , I want only numeric data to be right aligned ,
Thanks in advance.
↧

sum filtered rows/columns

March 15, 2013, 5:42 am
$
0
0
Hi
I want to be able to sum a column of data after a filter has been applied using the plug in column filter.

I found this thread: http://datatables.net/forums/discussion/2053/fnfootercallback-sum-column-after-filter/p1

Which partly relates to the solution but I'm unclear on how I can use the object created:

._('td:nth-child(4)', {"filter": "applied"})

I'm a novice at jquery - I assume I need to go through each cell in the column and add the value but I havent a clue on how to start this

Can you point me in the right direction please

Thanks
↧
↧

Uncaught TypeError: Cannot read property 'length' of undefined

May 12, 2013, 4:08 am
$
0
0
hi guys , i use Datatable 1.9 inside of codeigniter framework !
well u know everything works great when i use static data s ! but in ajax way i have a problem
here is my initializing datatable and Json data !

oTable = $('.Reza').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "http://localhost/neuron/index.php/company/list_all",
        "sServerMethod": "POST",
        "sDom": '<"H"fl>t<"F"ip>'
    });

json data :
{
   "sEcho":0,
   "iTotalRecords":8,
   "iTotalDisplayRecords":8,
   "aaData":[
      [
         "Reza Marandi",
         "administrator",
         "110",
         "Iran",
         "Mashhad"
      ],
      [
         "Reza MM",
         "mar@mar.ir",
         "110",
         "United Kingdom",
         "sdfgsdg"
      ],
      [
         "Reza MM",
         "mar@mar.ir",
         "110",
         "United Kingdom",
         "sdfgsdg"
      ],
      [
         "Reza Joooon",
         "reza@marandi.ir",
         "m110",
         "Bouvet Island",
         "asdasd"
      ],
      [
         "Reza Marandi",
         "marandi@marandi.ir",
         "0",
         "",
         ""
      ],
      [
         "Reza Jooo222222222on",
         "reza@marandi.ir2",
         "0",
         "",
         ""
      ],
      [
         "Reza Jooo222222222on",
         "reza@marandi.ir2",
         "0",
         "",
         ""
      ],
      [
         "Reza Masdasdasdasd",
         "mar@mar.ir2",
         "0",
         "",
         ""
      ]
   ],
   "sColumns":"Name,UserName,Password,Country,City"
}


and here is my view code :


<!-- Table with always visible toolbar -->
                    
                    <div class="widget">
                        <div class="whead"><h6>Companies Users</h6><div class="clear"></div></div>
                        <div id="dyn" class="hiddenpars">
                            <a class="tOptions" title="Options"><img src="<?php echo base_url(); ?>/assets/images/icons/options" alt="" /></a>
                            <table cellpadding="0" cellspacing="0" border="0" class="Reza" id="dynamic">
                                <thead>
                                    <tr>
                                        <th>Name ( Username )<span class="sorting" style="display: block;"></span></th>
                                        <th>Groups Name</th>
                                        <th>City</th>
                                        <th>Address</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table> 
                        </div>
                        <div class="clear"></div> 
                    </div>   

                    <!-- / Table with always visible toolbar -->



in this situation i got this error : 

Uncaught TypeError: Cannot read property 'length' of undefined

and when i remove "sDom": '<"H"fl>t<"F"ip>' everything works great again but my style goes stupid ! please help , i dont know what to do :( !
↧

Problems with sorting

May 13, 2013, 1:23 am
↧
Search

customize sMessage option Print button - TableTools

May 13, 2013, 8:52 am
$
0
0
I have a form that allows a user to select filters. This is then displayed in a DataTable. I am using the TableTools functionality to provide the user the ability to print the table. I want to display all the selected/entered filter values in the print view. Right now I can display a string using the sMessage option but I am not sure how to get the values to print a function that retrieves all the selected/entered values. I know I could just use document.getElementId('value').value but what about if the value is null and I want to display an Unknown.
Thanks
↧

Datatables - Server side processing - Submit form data - fnServerData not getting called

May 13, 2013, 7:32 am
$
0
0
Hello,

I am trying to implement the datatables with server-side processing.

This is what I am trying to achieve:

On a form, I have some search input fields which on submission would retrieve numerous results. In order to achieve optimum performance we are trying to implement datatables with server-side processing.

I went through the documentation for the server-side and as a part of PoC (without the form fields being submitted - CodeSet 1 below) I see that the sAjaxSource is called at the time of datatables initialization, and the datatable is getting rendered. However, we wanted to initialize the datatables with server-side processing on form submission ( scenario explained below after Code set 1)

---CodeSet 1---------- without fnServerData -------------
var violationDT;
function initDataTable(){
	/*
	 * initiate the datatable for the violations table.
	 */
	violationDT = $("#tableViolations").dataTable({
        "bServerSide": true,
        "sAjaxSource": ajaxDataURL,
        "bProcessing": true,
        "bJQueryUI": true,
        "iDisplayLength": 50,
        "iDisplayStart": 0,
        "aoColumns":
        	[
        	 {"mDataProp":"field 1"},
        	 {"mDataProp":"field 2"},
			 {"mDataProp":"field 3"},
			 {"mDataProp":"field 4"},
			 {"mDataProp":"field 5"},
			 {"mDataProp":"field 6"}
        	]
    });
}

Actual scenario:
On submitting the form input fields, we want to initialize the datatable with server-side processing. So, after searching through the posts on how to submit extra information (http://www.datatables.net/examples/server_side/custom_vars.html), I added the fnServerData as in the CodeSet 2 below, but the URL is never triggered on invoking the javascript method. It just initializes the datatable with the parameters and the fnServerData is never invoked.

1. Can somebody help out on how to trigger the fnServerData.

2. Also, is there a way to submit the form data (like in usual form submit) in this scenario instead of adding (pushing) multiple elements to the aoData parameter?

---CodeSet 2---------- with fnServerData -------------
var violationDT;
function initDataTable(){
	/*
	 * initiate the datatable for the violations table.
	 */
	var location = $('#selectedLocation').val();
	violationDT = $("#tableViolations").dataTable({
        "bServerSide": true,
        "sAjaxSource": ajaxDataURL,
        "bProcessing": true,
        "bJQueryUI": true,
        "iDisplayLength": 50,
        "iDisplayStart": 0,
        "aoColumns":
        	[
        	 {"mDataProp":"field 1"},
        	 {"mDataProp":"field 2"},
			 {"mDataProp":"field 3"},
			 {"mDataProp":"field 4"},
			 {"mDataProp":"field 5"},
			 {"mDataProp":"field 6"}
        	],
    	"fnServerData": function ( sSource, aoData, fnCallback ) {
			/* Add some extra data to the sender */
			aoData.push( { "name": "location", "value": location } );
			$.getJSON( sSource, aoData, function (json) {
				/* Do whatever additional processing you want on the callback, then tell DataTables */
				fnCallback(json);
			} );
		}
    });
}

Thanks,
Uresh
↧
↧

Datatables - flickering when theme enabled

May 13, 2013, 12:15 pm
$
0
0
Hi,

I'm having problems with using datatables in my website. The web application set up is as follows:

- index.html page has 3 JQuery tabs: tab one gets content from another html page, tab 2 is the one for using datatables taking content from jsp page.
- products.jsp page then connects to MySQL db and the ResultSet from the query populates string arrays.
table is then dynamically populated in a script like:
out.write("<td>rs.getString[i]</td>")

The problem I have is flickering between just normal table view in html to a datatables representation with theme, sorting and search.

Please help, not sure if this is because I'm dynamically creating the table or using too many stylesheets or any other reason??
↧

How to prevent memory leak when using Jquery - datatables (ie7)?

February 18, 2013, 4:19 pm
$
0
0
I am using datatables in my Javascript application but when rendering the DOM, memory of IE grows up like anything. Memory doesn't come down even after clearing the datatatables element from DOM.

I have multiple tabs and i remove the LI part of the DOM to remove the tab which host the datatable.

If I dont render the DOM via datatables, the utilized memory is very less..

var functionLoad=(function (datasource){
        var oTable = $("#" + elementId).dataTable({})
});

Can someone let me know the best way to prevent memory leaks when using IE7?

Is there a way to remove reference of table element?
↧

ColdFusion 10 integration

May 13, 2013, 1:30 pm
$
0
0
With respect to the nicely documented example for ColdFusion (http://www.datatables.net/development/server-side/coldfusion) I was having some trouble making it work when DataTables was making a callback to the data provider. After a bit of digging, I discovered that DataTables has another property called sAjaxDataProp. This permits me to use the CF 8 function SerializeJSON(<query>) to easily populate the data source of DataTables. My rendering code now uses:
 
$('#example').dataTable( {
 	"bProcessing": true,
	"bServerSide": true,
	"sAjaxSource": "event_rest.cfm",	
        "sAjaxDataProp": "aaData.DATA", ...
Note that I am able to access an inner data structure in the JSON data by referencing it using dot notation for the sAjaxDataProp property.

while my dataprovider page (event_rest.cfm) looks like this:
<cfcontent reset="Yes" />
{"sEcho": <cfoutput>#val(url.sEcho)#</cfoutput>,
"iTotalRecords": <cfoutput>#qCount.total#</cfoutput>,
"iTotalDisplayRecords": <cfoutput>#qFiltered.recordCount#</cfoutput>,
"aaData": <cfoutput>#SerializeJSON(cfquery_name)#</cfoutput>
↧
Viewing all 1817 articles
Browse latest View live
Search