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

Datatable in ASP.NET ListView sending all rows (including hiddenrows) to server side

February 9, 2014, 9:50 pm
$
0
0
Hi,
i am using datatable for table inside my ASP.NET ListView. this table has multiple rows and multiple pages. on click of a button i want to send all the rows in the listview to server side code.

on click of the button i am able to get the hidden rows using fnGetHiddenNodes() method.

i dont know to which i have to append to, so that all the rows are available in the server side.
↧
Search

how to reorder the index column after deleting from the table ?

February 10, 2014, 3:22 am
$
0
0
oTable=$('#myTable').dataTable( {
"fnDrawCallback": fnOpenClose,
"aaSorting": [[ 1, 'asc' ]],
"bSortClasses": false,
"sDom": '<"top"f>rt<"bottom"ilp><"clear">',
columns: ['', 'No'],
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0 ] }
]} );
function fnOpenClose( oSettings ) {
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered )
{
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
$('td:eq(1)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
}
$("#deleteApplication").click(function(){
oTable.fnDeleteRow(aPos[0]);
});


in the above code, i am adding the index column, and also every row having the delete button, after deleting the row, the index is not arranging as ascending order.
ex: before deleting the index is 1,2,3,4,5...
if click the delete button in the 3 row the row is deleting fine, but the index of the table is not in a order like after deleting the 3 row the index is in the order 1,2,4,5..

can u tell me that the column can be set in a proper order.
↧
↧

Multiple linked datatables

February 10, 2014, 4:05 pm
$
0
0
This is related to the thread http://datatables.net/forums/discussion/211/i-want-create-two-linked-datatables/p1, but a variant of it.

I have 2 datatables in the same page.
Datatable 1 - I have made one of the columns, a link which will call another javascript function with a parameter (the value of the column).
The javascript function makes creates datatable #2 in the same page using sAjaxSource using the parameter passed in.

Example to relate:
Datatable #1: List of all the companies
Datatable #2: List of all employees for each company. The CompanyId is the clickable field in datatable #1, and on click it loads the datatable #2 with only the employees of that company..

Issue:
The issue that i am facing is, when i click on a link in datatable #1, it loads datatable #2 fine. But, it does not refresh the data which i click on other links.

Any references would be greatly appreciated.

Thanks.
↧

Floating and dynamically resizing input fields above their respective columns

February 11, 2014, 12:37 pm
$
0
0
Is there a recommended solution for having input fields on a per-column basis, and having those filter fields stay above each column and resize dynamically with the columns? I've implemented something using jqueryui's position functionality ( http://jqueryui.com/position/ ) but just wondering if there are any other good solutions for this problem.

The test case would be when resizing the window, or paging through data that changes the widths of the columns, that the filter fields should resize their widths automatically. Also that when the page loads the filter fields position themselves right above each column.
↧

using mRender, how can I give radio buttons unique name per row?

February 11, 2014, 12:16 pm
$
0
0
Very simply, I'm building a table dynamically (as well as adding/removing rows dynamically), and each row will contain 4 columns. Three of the columns will be radio buttons. To function properly I need to give each row's set of radio buttons a unique name ... e.g. <input type="radio" name="radio-row-1" value="' + data + '" />

I can't figure out how to get that unique number for the name within mRender... whether it's the rowIndex or some other internal dataTable reference.

right now, my mRender looks like this:
        aTargets: [1,2,3],      
        mData: null,
        mRender: function (data, type, full) {
            if (type == 'display') {
                return  '<input type="radio" name="test"  value="' + data + '" />';
            }
            return data;
        }

Any advice?
Thanks!
↧
↧

DataTables Ajax + php +mysql

February 11, 2014, 1:12 pm
$
0
0
Hi Guys

Im really really new on DATATABLES

Im trying to pull out some information from mySQLDB in order to use Datatables, without success.........

I tried to follow the example that shows a biiiiiiiiiiiiig script at http://datatables.net/examples/data_sources/server_side.html
but I wasnt able to get any result data.

So for example got a DB students with score and name. <--my php should do the query and

-------------
so to get the json should it be on the php side?
-------------
mysql lets say its select * from students;<--does work returns results

$row = array();
while ( $aRow = mysqli_fetch_array( $rResult ) )
{
$row[] = $aRow["name"];
$row[]=$aRow["score"];
}
$output['aaData'][] = $row;
echo json_encode($output);

-------------------------------------
-------------------------------------

on my html on the <Script> area I have

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

and in the Body I got
<table border="0" id="example">
</table>


What Im I doing wrong ??
↧

Getting started

February 11, 2014, 4:54 pm
$
0
0
I'm sure my problem is very basic but I would appreciate your help. I have little knowledge of jQuery. Your debugger tells me that js is not running on my page: http://www.jackrisk.ca/MeditationBibliography.html.

I copied the expanded files to my website and I have uploaded all new files.

Here is the scripting I have in the head:

<!-- InstanceBeginEditable name="head" -->

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="/1.10.0-beta.1/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="/1.10.0-beta.1/js/jquery.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/1.10.0-beta.1/js/jquery.dataTables.js"></script>

<script type="text/javascript" class="init">
$(document).ready( function () {
$('#MeditationBibliography').DataTable();
} );
</script>

<!-- InstanceEndEditable -->
</head>
<body>
↧

how to always show a fixed number of rows

February 10, 2014, 9:02 am
$
0
0
Hi Allan

I hope you are well.
listen, I am trying to figure out something with the datatable that I didnt see an API hook for. My table viewport adjusts its height as the window resolution changes. that's all cool.

what I need to figure out is how to always show a fixed number of rows inside the view port; I don't actually care what that fixed number is; it can show whatever it was going to fit in that viewport height anyway. what I am trying to prevent is the scenario where a row at the most bottom is shown partially: half of the row is show and the other half isn't - you'd have to scroll up a little bit to show it fully; I need to figure out so what viewport height changes, it fits n number of rows without partials.

any input on this?
cheers mate, thank you
↧
Search

Keyboard Navigation - have to tab through the empty <thead> created inside 'dataTables_scrollBody'

February 10, 2014, 10:15 pm
↧
↧

DataTables could not be implemented in repeating tables

February 11, 2014, 10:51 pm
$
0
0
Hello, I have the following code (table_view.php) which serves as the default table for the site. All data in the site that is to be represented in a table will be calling the function from table_view.php. Meaning to say, it could be called repeatedly by different datasets. For instance, on a page, there could be 5 different tables with 5 different datasets but all calling from the same function. This will make all the tables having the same table id (since it is called from the same file table-view.php)

<!DOCTYPE html>
<html>
	<head>
 <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
	
	</head>

<body>


<?php
$row_id="";
if($_GET['page']==1 || isset($_GET['page'])==false){
	$row_id=1;
}elseif (isset($_GET['page']) && $_GET['page']>1) {
	$row_id=($_GET['page']-1)."1";
}

$doc = JFactory::getDocument();

$doc->addScript('http://code.jquery.com/jquery-1.11.0.min.js';);
$doc->addScript('http://datatables.net/download/build/nightly/jquery.dataTables.js';);

$doc->addScriptDeclaration('
    jQuery(document).ready( function () {
        jQuery("#main-table").DataTable();
    });
');
?>
<h1><?php echo $this->title ?></h1>

<table id="main-table" border="<?php echo $this->tableBorder ?>" class="display" <?php if(!empty($this->tableWidth)) echo 'width="'.$this->tableWidth.'"';?> >
<thead>
  <?php 
  if(!$this->hideHeaderTable)
  {
	  
	  if($_GET['t']!='maklumat_ringkas'){
	  echo "<tr><th width='10px'>Bil</th>";
	  }
	  
	 
	  foreach($this->tableData[0] as $key=>$tableHeader)
	  {
		  ?>
		<th width="<?php echo $this->tableData[1][$key] ?>" scope="col"><?php echo $this->tableData[0][$key] ?></th>
		<?php
	  }
	  ?>
	  </tr>
      </thead>
  <?php
  }
  
  
  $lenData = count($this->tableData);
  
  for ($j=3;$j < $lenData; ++$j)
  {
	  ?>
	  <tr class="centertable" <?php if($j % 2==1) echo 'bgcolor="#EFF4FB"'?>><?php if($_GET['t']!='maklumat_ringkas'){echo "<td>".$row_id++."</td>";}?>
		  <?php 
          foreach($this->tableData[0] as $key=>$tableHeader)
          {
              ?>
            <td width="<?php echo $this->tableData[1][$key] ?>" <?php echo $this->tableData[2][$key] ?>><?php echo stripslashes($this->tableData[$j][$key]) ?></td>
            <?php
          }
          ?>
	  </tr>
	  <?php
  }
  
  ?>
 <!-- <tr>
    <td colspan="2">JUMLAH</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>-->
</table>
</body>
</html>

However, I only managed to implement DataTables on the first occuring table. The remaining tables remain the same without DataTables. How can I implement DataTables on all of the tables on the page since they've all got the same table id?
↧

Sorting via keyboard keypress in Internet Explorer doesn't work correctly

August 10, 2013, 11:03 am
$
0
0
My application uses DataTables 1.9.4. My app was being reviewed by our accessibility team and they discovered that when using Internet Explorer, if you press TAB to go to a header cell and press return, it submits the form instead of sorting the column

I verified that the press return to sort worked CORRECTLY in:
* Chrome (28.0.1500.95), Mac
* Chrome (28.0.1500.95 m), Windows
* Firefox (22 and 23), Mac
* Firefox (20.0.1, 22, and 23), Windows
* Safari (5.1.7), Windows
* Safari (6.0.5), Mac

I verified their report of this problem with Internet Explorer 10 (10.0.9200.16635) in Windows 8. They were likely using either IE9 or IE10 in Windows 7 (I don't immediately know, but if it makes a difference I can find out).
↧

accent insensitive filter

January 8, 2014, 11:20 am
$
0
0
hi,

is it possible to do filter that is accent insensitive ?

Thanks
↧

Pwcwwvrtkjvytir epanasonic Any insurance policies pany is actually weak its Pgxkdewcvtjbcpo

February 12, 2014, 7:05 pm
$
0
0
A person's insurance pany is certainly decreasing the maintain seem like the crash Eighty percent these individuals at fault & rendering 20 percent ones failing being the transforming placed being an individual & discussed ones own destruction <a href="http://www.epanasonic.com">epanasonic</a&gt; less deductable all of which ought to go over their particular losses in case you just pay check in for the reason that how omission that will being at wrong doing for the purpose of acci<br>
<a href="http://www.absolutecycle.com/forum/forum_posts.asp?TID=4400&PID=9806&#9806">Jvrksmydexfy panasonic chief executive officer, Ignitee Digital camera, suggests, Jaya can bring with her enormous Pccamylmnsg</a>
<a href="http://lifeedge.org/forum/read.php?1,2884">Lmsszhsalbdtru panasonic For taking treatments you do not possess to look for Phthevrjtlorkxsxsam</a>
<a href="http://m3tri.com/disc/post/discussion">Geelgzycycc epanasonic.com Unrealistic.Indeed, as the not regulated giving out involved with body fluids Fallpgnoyhmw</a> xxxxxx
↧
↧

Speeding up datatables when retrieving data from indexedDB

February 12, 2014, 2:46 am
$
0
0
I am using datatablejs on client side for displaying the database to client. I download the database from server initially using backbone indexeddb adapter and store it in indexedDB so as to support offline access to data. However, datatables take approx around 5 minutes to render 20,000 entries from indexedDB. This is my JS code:
http://jsfiddle.net/mPyH5/

I have tried using methods listed here: http://datatables.net/faqs#speed but none of them works. I have also tried using infinite scrolling. It doesn't reduce time. Can anybody suggest a way to make the list page load faster?
↧

bFilter does not filter new cells

February 13, 2014, 8:02 pm
$
0
0
I have a HTML table with some rows of data. I then update some cells via AJAX, but the new cells are not being filtered.

Please help.
↧
Search

Two oSettings object instance in table it's correct?

February 12, 2014, 11:51 pm
$
0
0
Hi, all.
First, sorry for my English.
My problem:
I update dT from 1.8.2 to 1.9.4 and discover what my dataTables object which I save as
var table = $("#kdl-profile-table").dataTable({
,and which I use below in my functions,
have two instance table.dataTableSettings [0] and [1].

Its correct behaviour? I'm not see it early.
↧

Filter doubts

February 14, 2014, 6:00 am
$
0
0
I created a table with some sample datas that I created and initialize the dataTable...amazing, everything works GREAT! But I have a doubt, imagine that in one column I have 3 kind of data: VIP, Regular and Trial...Is there some way in the search input I write something like this: "VIP Regular" and the dataTable filter rows of both values? I tried but didn't work cause the dataTable tried to find the column that have both values together.
↧
↧

Use of sScrollX creates duplicate table header id's, causing accessibility WCAG 2.0 A to fail.

February 16, 2014, 3:23 am
$
0
0
Firstly, would like to say thanks for a great plugin!

I do have an issue that I struggling to resolve ;o(

My table has to conform to WCAG 2.0 AA standard.

I encounter an issue when id’s have been entered into my table header tags and the sScrollX option has been utilised, this combination causes the id’s to be duplicated within the table(s) and therefore causes the accessibility check to fail.

Here is an example of my table source code with the table header tags:

<table id="all-users" class="data-table left">
	<thead>
		<tr>
			<th id="firstname">First Name</th>
			<th id="surname">Surname</th>
			<th id="usertype">User Type</th>
			<th id="email">Email Address</th>
			<th id="username">User Name</th>
			<th id="telephone">Telephone Number</th>
			<th id="centrename">Centre Name</th>
			<th id="currentstatus">Current Status</th>
			<th id="action">Action</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="firstname">Joe</td>
			<td headers="surname">Bloggs</td>
			<td headers="usertype">Admin</td>
			<td headers="email">jbloggs@verelogic.com</td>
			<td headers="username">jbloggs</td>
			<td headers="telephone">01793 411111</td>
			<td headers="centrename">DAO Administrator</td>
			<td headers="currentstatus">Enabled</td>
			<td headers="action"><a href="#" title="Edit Record - Joe Bloggs" alt="Edit Record - Joe Bloggs" class="icon-space icon-file"><span class="icon-pencil-2 small-icon" aria-hidden="true"></span><span class="screen-reader-text">Edit Record - Joe Bloggs</span></a><a href="#" class="icon-user-2" title="Modify User - Joe Bloggs" alt="Modify User - Joe Bloggs"><span class="icon-pencil-2 small-icon" aria-hidden="true"></span><span class="screen-reader-text">Modify User - Joe Bloggs</span></a></td>
		</tr>
	</tbody>
</table>

I’m aware that when the sScrollX option is utilised, the table is split into three separate tables, but this is where I encounter my accessibility issue.

When I view the source or view the code in Firebug, the table header has been duplicated in both the dataTables_scrollHead and dataTables_scrollBody, which fails the accessibility check:

“ID must be unique.”

Please find below the output code to showcase this issue:

The first piece of code is the output for the dataTables_scrollHead (I have only cut three table headers as there is a lot of code.)

<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
	<div class="dataTables_scrollHeadInner" style="width: 1039px; padding-right: 0px;">
		<table class="data-table left dataTable" style="margin-left: 0px; width: 1039px;">
			<thead>
				<tr role="row">
					<th id="firstname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-sort="ascending" aria-label="First Name - click/return to sort descending" style="width: 80px;">
						<div class="DataTables_sort_wrapper">First Name<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div>
					</th>
					<th id="surname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="Surname - click/return to sort ascending" style="width: 68px;">
						<div class="DataTables_sort_wrapper">Surname<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
					</th>
					<th id="usertype" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="User Type - click/return to sort ascending" style="width: 75px;">
						<div class="DataTables_sort_wrapper">User Type<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
					</th>

The second piece of code is the output for the dataTables_scrollBody (I have only cut three table headers as there is a lot of code.)

<div class="dataTables_scrollBody" style="overflow: auto; width: 100%;">
	<table class="data-table left dataTable" id="all-users" style="margin-left: 0px; width: 1039px;" aria-describedby="all-users_info">
		<thead>
			<tr role="row" style="height: 0px;">
				<th id="firstname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-sort="ascending" aria-label="First Name - click/return to sort descending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 80px;">
				</th>
				<th id="surname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="Surname - click/return to sort ascending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 68px;">
				</th>
				<th id="usertype" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="User Type - click/return to sort ascending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 75px;">
				</th>

Your help would be much appreciated.
↧

[API] On data loaded callback

February 16, 2014, 9:06 am
$
0
0
Hi,
I need to perform an operation when the JSON file is downloaded by DataTables. Is there a way to do so?

This is how I initialise DataTable:
    var table = $('#userlist').dataTable( {
        "bProcessing": true,
        "sAjaxSource": 'ajax.php?userlist'
    });
↧

Getting aoData null exception

February 17, 2014, 2:18 am
$
0
0
Hello all, I m using datatable in my MVC project. I have rendered datatable into pop up dialog and it is working fine for first time, when I close the pop up dialogue and open it again the datatable is rendering perfectly but when I click on row it gives me aoData not fount exception. After long search I found that the datatable which passed on row click and the datatable which rendered has some difference. Can any body help me on this problem?
↧
Viewing all 1817 articles
Browse latest View live
Search