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

Sort by decimal column

$
0
0
Hello,

I have one column wich format is a decimal number XX.XX. When I sort by this column, the table get this field as a text.
How I sort this column as a decimal number and not as a text please? I try to put "sType": "numeric" but not works :(

Thanks!

bStateSave cookie: when does this reset?

$
0
0
Hi,

We have a problem regarding bStateSave cookie. We have used bStateSave=true. The feature is working fine, but it works a little too much.
It remembers the state even after the user logs out of the application. So the next time when user again visits the page, the settings are still there.

Q1. When does the cookie gets deleted/reset?
Q2. Is there a way to manually delete/reset the cookie?

Thanks a lot in advance.
- Aalap

How to Resolve missing table headers in grid generation

$
0
0
I ran into an issue where the following error was being thrown when trying to update a Data Tables grid with a new grid and a new set of data:

Exception calling dataTable: TypeError: nThs[i - iCorrector] is undefined

I was loading the Data Tables grid to an empty table on click. The first action I performed when clicking my query button was to empty the said table using
$('#myTable').empty();
and then reload the Data Tables grid to the same table. The problem is that when Data Tables loads the grid it wraps the table with certain divs as well. So when I emptied the table and tried to load another grid it threw the previous error when the new grid I was loading had more columns than the previous grid that had been loaded.

To solve the problem I created an empty div and appended the empty table to the div, then loaded the Data Tables grid to the table. On click I emptied the div, rinse and repeat, everything worked fine. I tried messing with fnDestroy or fnClearTable without success.

I hope this might help someone who runs into the same issue.

Requested unknown parameter '_id' from the data source for row

$
0
0
Hi,

Using sAjaxDataProp:"" in our dataTable. Works well for loading data through ajax.

Also using editor to interact with a REST api. Delete works well, but Create does not. Depending on how settings are set and data is returned from the server, we either get a "Requested unknown parameter '_id' from the data source for row" error message if we return created row using aaData or directly (as shown in example below) (property "_id" *is* in the data) or a "Uncaught TypeError: Cannot read property 'length' of undefined" if we only return something like 'true'.

Any idea what's wrong?

datatable:
			$(document).ready(function() {
				var editor = new $.fn.dataTable.Editor( {
					"ajaxUrl": {
						"create": "POST http://mydomain/api/site",
						"remove": "DELETE http://mydomain/api/site/_id_"
					},
					"domTable": "#table_sites",
					"dbTable": "sites",
 					"fields": [
						{
							"label": "{{col_name}}",
							"name": "name",
							"type": "text"
						}
					]
				} );

				$('#table_sites').dataTable( {
					"sDom": "<'row-fluid'<'span4'l><'span4'T><'span4'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
					"bProcessing": true,
					"sAjaxSource": 'http://mydomain/api/site/list',
					"sAjaxDataProp": "",
					"fnCreatedRow": function( nRow, aData, iDataIndex ) {
						$(nRow).attr('id',aData["_id"])		//need this because server side data does not return DT_RowId
					},
					"aoColumnDefs": [
						{ "aTargets": [0], "sTitle": "{{col_id}}", "mData": "_id" },
						{ "aTargets": [1], "sTitle": "{{col_lang}}", "mData": "lang" },
						{ "aTargets": [2], "sTitle": "{{col_theme}}", "mData": "theme" },
						{ "aTargets": [3], "sTitle": "{{col_name}}", "mData": "name" },
						{ "aTargets": [4], "sTitle": "{{col_type}}", "mData": "type" },
						{ "aTargets": [5], "sTitle": "{{col_version}}", "mData": "version" },
						{ "aTargets": [6], "sTitle": "{{col_created}}", "mData": "created" },
						{ "aTargets": [7], "sTitle": "{{col_modified}}", "mData": "modified" }
					],
					"oTableTools": {
						"sRowSelect": "single",
						"aButtons": [
							{ "sExtends": "editor_create", "editor": editor },
							{ "sExtends": "editor_remove", "editor": editor }
						]
					}
				} );
			} );


json returned on create:
{"name":"asdfasdfasdf2","type":"general","version":"1.0","theme":"client-planetebebe","created":1355865082,"modified":1355865082,"lang":"en-CA","_id":"ID:50d0dbfa3b8e77be4000000c"}

Enable/Disable Fixed columns

$
0
0
Hi

We have a requirement to enable or disable the datatable fixedcolumn on a button click. Is there a way to handle the fixedcolumn plugin once it is applied on the datatable?

Detailed issue: We were creating nested datatables, but when we expand the sub table from parent, table created by fixedcolumn (on left side) is not getting resized/aligned.

Thanks.

Datatable js is not working in asp.net master page where as it is working in without masterpage

$
0
0
timeout = window.setTimeout(check, 0);
when i am debuging it is coming this type of error.

my code --


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="UserMasterlist.aspx.cs" Inherits="ECommerceNew.UI.UserMasterlist" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<link href="../Datatable/media/css/demo_page.css" rel="stylesheet" type="text/css" />
<link href="../Datatable/media/css/demo_table.css" rel="stylesheet" type="text/css" />
<link href="../Datatable/media/css/demo_table_jui.css" rel="stylesheet" type="text/css" />
<script src="../Datatable/media/js/jquery.js" type="text/javascript"></script>
<script src="../Datatable/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../Datatable/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="../Datatable/media/js/GridviewFix.js" type="text/javascript"></script>
<script type="text/javascript">
//without passing class names.
$("#GridViewExample").GridviewFix().dataTable();
//Passing class names
//$("#GridViewExample").GridviewFix({header:"headerStyle",row:"rowStyle",footer:"footerStyle"}).dataTable();
</script>
<div style="margin-top:50px" >

<asp:GridView ID="GridViewExample" runat="server" AutoGenerateColumns="false" cellpadding="0" cellspacing="0" border="0" class="display">
<Columns>
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField HeaderText="Town" DataField="Town" />
<asp:BoundField HeaderText="Age" DataField="Age" />
<asp:BoundField HeaderText="Employee Id" DataField="Id" />
<asp:BoundField HeaderText="Skills" DataField="Skills" />
</Columns>
<%-- Mandatory--%>
<RowStyle CssClass="rowStyle"/>
<%-- Mandatory--%>
<HeaderStyle CssClass="headerStyle" />
<%-- optional--%>
<FooterStyle CssClass="footerStyle" />
</asp:GridView>
</div>

</asp:Content>


cs---



public partial class UserMasterlist : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
clsEmp emp = new clsEmp();
GridViewExample.DataSource = emp.GetEmployeeList;
GridViewExample.DataBind();
GridViewExample.UseAccessibleHeader = true;
GridViewExample.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
}
public class clsEmp
{
public string Name { get; set; }
public string Town { get; set; }
public string Age { get; set; }
public string Id { get; set; }
public string Skills { get; set; }
public List<clsEmp> GetEmployeeList
{
get
{
List<clsEmp> data = new List<clsEmp>(){
new clsEmp{ Name="Rupesh" , Age ="29" , Id="114230" , Skills="c sharp, jquery", Town="Louisville"},
new clsEmp{ Name="Dewang Mehta" , Age ="35" , Id="012530" , Skills="c sharp, project manager", Town="Louisville"},
new clsEmp{ Name="Ravindra Ravouri" , Age ="32" , Id="012230" , Skills="c sharp, dot net", Town="Amherst"},
new clsEmp{ Name="Laxmikanth Vardhanapu" , Age ="31" , Id="154587" , Skills="BA", Town="Louisville"},
new clsEmp{ Name="Rajeswar" , Age ="30" , Id="116230" , Skills="c sharp, dot net", Town="Louisville"},
new clsEmp{ Name="Monika" , Age ="10" , Id="154230" , Skills="c sharp", Town="Louisville"},
new clsEmp{ Name="Mandar" , Age ="37" , Id="234230" , Skills="Account Leader", Town="Amherst"},

new clsEmp{ Name="Harshal" , Age ="31" , Id="244587" , Skills="Project Lead, dot net", Town="Mumbai"},
new clsEmp{ Name="Lalit" , Age ="26" , Id="126230" , Skills="c sharp, dot net", Town="Ulhas nagar"},
new clsEmp{ Name="Arun" , Age ="29" , Id="125230" , Skills="c sharp", Town="Mulund"},
new clsEmp{ Name="Ankita" , Age ="12" , Id="144230" , Skills="c sharp", Town="Andheri"}
};
return data;
}
}
public List<clsEmp> GetEmployeeByName(string name)
{
return this.GetEmployeeList.FindAll(emp => emp.Name == name);
}
}
pls help--

Get row index in mRender

$
0
0
It is possible get row index in mRender? Something like this:
 {
"mData": "someData",
"mRender" :  function ( data, type, full ) {
     // get rowIndex somehow
     return '<a href="'+data+'">Download '+ rowIndex +'</a>';
   }
}

Thank you.

Node order after drop

$
0
0
I realized that my drag and drop script for row reordering was only working on the current page of rows, which is not a good thing. I was iterating through the rows using $(this).parents('table').find('tr').each(function() {...} I'm trying to alter the script and I found that I can iterate through all the nodes using $(oTable.fnGetNodes()).each(function () {...})

Here's what I can't figure out though...the above code iterates through the nodes in the original order they were displayed in the table, not the order after dropping a row. Is there a way to get the nodes in the order they are currently in instead of when the table loaded?

Thanks for the help!

Posting datatables form rows with $.post not work -- can you help?

Adding Dyanamic columns to a table

$
0
0
Is it possible to dynamically create columns on the fly on a button click in data table.

fnAdjustColumnSizing() ignoring column width

$
0
0
Hi Allan,

Quick question regarding fnAdjustColumnSizing(). I'm using this because I have a dataTable in a Bootstrap tab. I also have a column defined with 'sWidth': '50px'. When fnAdjustColumnSizing() executes, it resizes the columns to the content width and seems to ignore any sWidth setting on the columns. Is there any way to get fnAdjustColumnSizing() to use the specified column width? Or is there a way to redraw the table using the sWidth settings instead of using fnAdjustColumnSizing() when using tabs?

Thanks for the help!

Vertical Scrolling Messes up Column Header Alignment

$
0
0
Hi all!

I'm using version 1.8.1 and am having nightmares over column header alignment with vertical scrolling enabled. After using various hacks to get this to work (looping through the scrollBody headers that are hidden to grab the appropriate widths and then applying them to the scrollHeader headers.... hiding the scrollHeader row completely and writing my own div headers based on the widths from the hidden scrollBody headers... etc.), I'm at my wit's end.

If I can get it to work in one browser, it breaks in the others. Right now with the code posted below, the headers line up correctly in Firefox and IE8 and IE9, but Chrome and IE7 are off. I'm using a *lot* of datatables on this project, and this is a problem with everyone. I'm desperate for help!

I'm not using any of my worthless hacks with the code below, just setting sScrollY.

Thanks!!

Screenshots:
www.dennissheppard.net/firefox_alignment.png
www.dennissheppard.net/chrome_alignment.png
www.dennissheppard.net/ie7_alignment.png

datatable code:
otable = $('#order_review_grid').dataTable({				
	'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
		return formatRow(nRow, dataIndex);
	},
	'fnDrawCallback':function()
	{
		checkIfOrderSubmitted(this);					
	},
	'aoColumnDefs':
	[
		{ 'bVisible': false, 'aTargets': [COL_PRODUCT] },
		{ 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
		{ 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
		{ 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
		{ 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
	],
	'sDom': 't',
	'sScrollY':'405px',
	'bScrollCollapse':true,
	'aaSorting':[]
});

Html:

<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">					
	<thead class="grid_column_header_row" id="order_review_grid_column_header_row">
		<tr>
			<td class="" id='sequenceNumber'>SEQ #</td>
			<td class="grid_sc_header" id='statusCode'>Sc</td>
			<td class="grid_sc_header" id='onOrderGuide'>O.G.</td>
			<td class="grid_image_header" id='image'>Image</td>							
			<td class="grid_description_header" id='description'>Description</td>							
			<td class="grid_brand_header" id='label'>Brand</td>
			<td class="grid_pack_header" id='packSize'>Pack</td>
			<td class="grid_price_header" id='price'>Price</td>
			<td class="grid_qtrfull_header" id='caseQuantity'>Full</td>
			<td class="grid_qtrypart_header" id='eachQuantity'>Partial</td>
			<td class="grid_refnum_header" id='referenceNumber'>Ref #</td>
			<td class="grid_refnum_header">&nbsp;</td>
		</tr>
	</thead>
	<tbody class="">
		<!-- loaded data will go here -->
	</tbody>
</table>

Dynamically enable/disable rowReordering() plugin

$
0
0
Hello,

I decided to try out the rowreordering plugin as seen here: http://datatables.net/forums/discussion/8725/row-reordering-plugin-with-dragndrop-capabilities-is-released/p1

Allen commented that it would be nice with an adaption so that sorting could still work, optionally. I'm a jquery nub, here is my initial attempt.

//declare the table WITHOUT reordering 
var oTable = $('#example').dataTable(); 
// Add a jquery click or whatever conditional to add the plugin. 
$('#enableReorder').click( function () {
oTable.rowReordering( { sURL:"UpdateRowOrder.php" }); 
});

So far that all works fine, its disabled to begin with, it can be enabled on click.

My problem is how to REMOVE this once its been added. If it was just a setting like oSetting, i know i could change the setting then fnDraw. I thought id try fnDestroy, but even after destroying the table and rebuilding, i lose all my formatting but it keeps the plugin. Consider the following proposal i had hoped would work.

$('#buttonReorderCategory').toggle(function() 
{ 
oTable.rowReordering( {
sURL:"UpdateRowOrder.php" 
}) 
}, function() {
oTable.fnDestroy(); 
oTable.fnDraw(); 
});

Firstly, using destroy is probably stupid because i have a bunch of formatting some through callbacks that i lose when i destroy and redraw, so id ideally like to keep those. But even when i destroy, it still keeps the damned .rowReordering() additional to datatables.

So anyway, if anybody has a pointer id really appreciate it. I've just about finished a full fledged crud (adapted on the server side examples), using mongodb so perhaps i can post my solution once im done for people who want inline editing with jeditables, serverside reordering using mongo and other things.

Finally, shortly before writing this, it occurred to me that from the fact that rowReordering is little known, yet plugins like datatables.jeditable is widely known, perhaps I should look and see if anybody has a solution on how to disable this instead.

Problem is, jeditables is so well written that despite it's popularity, nobody has wanted to disable this plugin dynamically on the fly so i cant see a similar method to adopt for this. That being said, if you've heard of a way to do it for .jeditables(), let me know because it may work for this...

Cheers.

width columns problem in Chrome & Safari

$
0
0
Hi Allan,
First of all I want to congratulate you for your work. Datatables is an incredible tool! Thanks a lot for sharing it!

I have a problem with difference in column width between the headers and the column themselves when datatables is called with sScrollY and when the scrollbar is visible.

When the page is initially open, or refreshed, the header line width is taking the width of all the table, including the scrollbar, so the placement and the width of individual header column is not on the top of the column itself.
Once you click on any header, to sort by one column, everything is magically resetting well until you refresh/reload the page. Note that this problem occurs only in Chrome and Safari. Everything is fine in FF, IE or Opera.

I've try to simplify my problem in a minimal test case. Could you have a look at it and give me any advice or help?
http://test.onelog.be

Thanks a lot,
Philippe.

bRegex does not work with server side processing

$
0
0
Hello,

I don't now if I'm doing anything wrong but I'm trying to use bRegex in server side processing and it is not working. I have a definition like this:
"aoColumns": [
{ "mDataProp": "browser", "bRegex": true},
{ "mDataProp": "status", "bSortable": false },
{ "mDataProp": "version", "sClass": "vShow" }
]

And everything is working expect bRegexp. For bRegex it always sends false:

sEcho=2&iColumns=3&sColumns=&iDisplayStart=0&iDisplayLength=100&mDataProp_0=browser&mDataProp_1=status&mDataProp_2=version&sSearch=&bRegex=false&sSearch_0=firefox&bRegex_0=false&bSearchable_0=true&sSearch_1=&bRegex_1=false&bSearchable_1=true&sSearch_2=&bRegex_2=false&bSearchable_2=true&iSortCol_0=1&sSortDir_0=desc&iSortingCols=1&bSortable_0=true&bSortable_1=false&bSortable_2=true

Is there a bug or I'm doing something wrong?

Thanks,
Cristina

Adding more data to dataTables without refreshing whole table (ServerSide table).

$
0
0
Hi, I need to add some more rows below the one that user choose. Data in aaData is fetched for the selection (lets say 2 rows came back), how to insert them but without refreshing whole table?
I can use fnAddData, cuz it needs fnDraw to render table data anyway. I cant either add manually some data to aoData, cuz in order to render proper TR markup, fnDraw has to be called.

Is there a way to manually render few rows (like some use of _fnCreateTr) in a chosen destination (tr position)?

aaSorting: [] not working for me...

$
0
0
I've just come across DataTables this week and LOVE it! GREAT tool...

I've got what might be a complicated mix of UI Tabs, homegrown stuff, sortable, jeditable and TableTools, so it's possible I'm causing this problem elsewhere. Here's my page:

http://apps-test.library.kent.edu/tabletest/table02.php

For this example, click on "Select Table", then in the second pull down, choose "zz000000140". Click the "Table Structure" tab.

I'm rendering this table with the sort on the first column, so it should be in ascending order. When I don't use TableTools on this table, the table renders/sorts as expected. When I add TableTools, the Field Order column sorts 2, 3, 4, 5, 6, 1 - and I can't figure out why the 1 record is bumping to the end. I've tried removing the "grabber" icon for re-ordering the rows, but that doesn't make a difference. Adding/removing aaSorting : [] doesn't change anything. I've tried bSort: false - also doesn't matter.

Any suggestions? I've tried it in different browsers, cleared caching, etc...

Thanks again for a wonderful product!
Jeph

datatable desiging

$
0
0
I want to change the data-tables design in jquery.dataTables.js like I want arrange the all the properties(paging, views, next and previous) in single row(TR). please help me ASAP.

TableTools not working

$
0
0
export data and TableTools not working for me, after adding this line between head:
    <script type="text/javascript" language="javascript" src="../../components/dataTables/media/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="../../components/dataTables/media/js/ZeroClipboard.js"></script>
    <script type="text/javascript" language="javascript" src="../../components/dataTables/media/js/TableTools.js"></script>
and change table id prop in this:
    $('#myTable').dataTable({
       "sDom": '<"clear">lfrtipT'
    }); 
i can see tableTools buttons on the table but, thay are not working .
by the way, downloaded example of tableTools (TableTools-2.1.4) after adding jquery.js and jquery.dataTables.min.js to head not working.

Defer my feature after initialisation

$
0
0
I've created a plugin of DataTable, but I would just like it be loaded after the DataTable ('t' in sDom) is initialized. Is this supported or not? If so, what should I do? Thanks!
Viewing all 82226 articles
Browse latest View live


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