Search

I'm trying out DataTables with server-side processing. It looks like DataTables replaces the entire cell with the received data. Is it possible to target specific elements or attributes inside each cell? This is what the page normally looks like: http://tl.toofz.com/Quotes/List (http://debug.datatables.net/ukijor). This is what it looks like after I enable server-side processing: http://tl.toofz.com/Quotes/Quote/ListDT (http://debug.datatables.net/acabiy). Here's a sample JSON output: [code]{ "aaData":[ [ "Leonard", "This is an incredibly quotable quote.", "8" ], [ "Marsilio", "A sturdy lad ... who teams it, farms it ... and always like a cat falls on his feet, is worth a hundred of these city dolls.", "7" ], [ "Hermann", "If you hate someone, you hate something in him that is part of yourself. What isn't part of ourselves doesn't disturb us.", "6" ], [ "Alphonse", "Every man has three characters: That which he exhibits, that which he has, and that which he thinks he has.", "5" ], [ "Elmo", "You generally hear that what a man doesn't know doesn't hurt him, but in business what a man doesn't know does hurt.", "3" ] ], "iTotalDisplayRecords":8, "iTotalRecords":8, "sColumns":null, "sEcho":"1" }[/code]

Hello, I am trying to enable multiple controls (header and footer same) with export buttons. If controls are only in footer buttons are working fine. See http://bambous.cz/DataTables/jb2.html When I enable controls for header as well [code]"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'[/code] buttons will disappear. See http://bambous.cz/DataTables/jb2-1.html Please advice. Thanks. Kvjetoslav

Hello, I am trying to implement TableTools and keep getting this jQuery error: "Type Issue 'undefined' is not an object (evaluating '$.extend') Issue (Image) can be seen here: http://kulersolutions.com/ls_images/error.png Any ideas?

First of all, awesome plugin. I can't believe how flexible DataTables is! Now for my problem: When using sSrollX, when I apply a solid 1px border so I can more clearly see the cells in a datatable, the horizontal scroll bar always appears (and it is slightly scrollable) even in cases when it shouldn't be there. As soon as I remove the border, the horizontal scroll bar disappears. Is there any way I can fix this? Thanks in advance!

Hi every one i am working on a project where i had to integrate knockout and datatables and i had to achieve CRUD operations using them... I have used knockout-datatables.js downloaded from this source https://github.com/CogShift/Knockout.Extensions my application is working properly but while iam performing rowlevel remove /edit..... which is similar to this example ( http://jsfiddle.net/ducka/haq2y/ ) the rowlevel event (example remove) will work only once... next if i have to make it work i have to either sort or use pagination i am not understanding why is it happening so ....can some one please help me Thank you :)

I am getting the following problem If one of the columns contains french characters it displays it like this -> Jan� Doe

Hi, For some reasons it has no effect to the "No matching records found" message even I modified the demo_table.css: .dataTables_empty { color: red; padding-left: 400px; } I found this post, but I am not sure if I edited the wrong spot. http://datatables.net/forums/discussion/7417/customize-no-matching-records-found-message-on-tables/p1 I tried to replace my demo.css to "jquery.dataTables.css" and it doesn't do anything too. table.dataTable td.dataTables_empty { color: red; text-align: right; } It is not like it doesn't work at all. It works if I modified the: "table.dataTable thead th", ".paging_full_numbers a.paginate_active", "table.dataTable tr.even" Has someone experience this issue before? Thanks.

Hi, I have searched high and low for an answer to my question but wasn't able to get a resolution to my question. I am trying to fit the datatable to fit inside a Google InfoWindow. Below is a snippet of code outlining how I approched to deal with this situationl [code] function drawTable(items,e) { var tmpStr = ""; var tmpStr2 = ""; var contentString = [ '<div class="tabs">', '<ul>', '<li><a href="#tab-1"><span>E. Coli Results</span></a></li>', '<li><a href="#tab-2"><span>Cyanobacteria + Microcystin Results</span></a></li>', '</ul>', '<div id="tab-1">', '<h1 style="color:red">' + beach_location + '</h1>', '<p>' + beach_region + '</p>', '<table class="data" id="ecoli_table" style="width:100%">', /* '<tr>', '<th>Sample Date</th>', '<th>Average E. coli Density <br/>(E. coli / 100 mL of sample)</th>', '<th>Recreational Water Quality Guideline <br/> (200 E. coli / 100 mL of sample)</th>', '</tr>' */ ].join(''); // add Ecoli Rows for (var j = 0; j < items.length; j++) { //console.log(items[j]); tmpStr = tmpStr + '<tr> <td>' + items[j][5] + '</td><td>' + items[j][6] + '</td><td>' + items[j][7] + '</td></tr>'; } //contentString = contentString + tmpStr + '</table></div></div>'; contentString = contentString + tmpStr + '</table></div>'; var contentString2 = [ '<div id="tab-2">', '<h1 style="color:red">' + beach_location + '</h1>', '<p>' + beach_region + '</p>', '<table class="data" id="algae_table" style="width:100%">', /* '<tr>', '<th>Sample Date</th>', '<th>Algase Toxin Microcystin</th>', '<th>Recreational Guideline 20ug</th>', '<th>Blue Green Algae Cells</th>', '<th>Recreational Guideline</th>', '</tr>' */ ].join(''); // add Algae Rows for (var j = 0; j < items.length; j++) { //console.log(items[j]); tmpStr2 = tmpStr2 + '<tr> <td>' + items[j][9] + '</td><td>' + items[j][10] + '</td><td>' + items[j][11] + '</td><td>' + items[j][12] + '</td><td>' + items[j][13] + '</td></tr>'; } contentString2 = contentString2 + tmpStr2 + '</table></div>'; contentString = contentString + contentString2 + '</div>'; infoWindow.setContent(contentString); infoWindow.setPosition(e.latLng); infoWindow.open(map); $(".tabs").tabs({ selected: 0 }); $("#ecoli_table").dataTable({ "sPaginationType": "full_numbers", "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "aaSorting": [[0, "desc"]], "bAutoWidth": false, "aoColumns": [ { "sWidth": "25px", "aTargets": ["_all"], "sTitle": "Sample_Date" }, { "sWidth": "25px", "aTargets": ["_all"], "sTitle": "Average_E._coli_Density" }, { "sWidth": "25px", "aTargets": ["_all"], "sTitle": "Recreational_Water_Quality_Guideline" } ], "bProcessing": true, /* "aoColumns": [ { "sTitle": "Sample_Date" }, { "sTitle": "Average_E._coli_Density" }, { "sTitle": "Recreational_Water_Quality_Guideline" } ] */ }); $('#algae_table').dataTable({ "sPaginationType": "full_numbers", "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "bAutoWidth": true, "bProcessing": true, "aaSorting": [[0, "desc"]], "aoColumns": [ { "sTitle": "Sample_Date" }, { "sTitle": "Algal_Toxin_Microcystin" }, { "sTitle": "Recreational_Guideline_20" }, { "sTitle": "Blue_Green_Algae_Cells" }, { "sTitle": "Recreational_Guideline" } ] }); } [/code] Any suggestions are greatly appreciated. Thanks in advance. Michael

I am considering using DataTables as a reporting tool and would like to allow users to create custom reports from the tables, save the setup for the report and then reload the report at a later time. Other that the state save functionality, is there something within DataTables, an extra or a plug-in that would allow me to do that? I'm thinking essentially it would require saving the DataTables objectand settings, plus any filters and/or column rearrangements that have been applied. Thanks for a great library!

I have a problem with including functions that editing , removig and creating rows. The code stops working when I declarate an 'editor' as an dynamic array.. ;/ Here's the code. Maybe someone will help :) [code] var editor; /* Data set - can contain whatever information you want */ var aDataSet = [ ['Trident','Internet Explorer 4.0','Win 95+',Math.floor((Math.random()*10)+1),'X'], ['Trident','Internet Explorer 5.0','Win 95+',Math.floor((Math.random()*10)+1),'C'], ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'], ['Trident','Internet Explorer 6','Win 98+','6','A'], ['Trident','Internet Explorer 7','Win XP SP2+','7','A'], ['Trident','AOL browser (AOL desktop)','Win XP','6','A'], ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'], ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'], ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'], ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'], ['Gecko','Camino 1.0','OSX.2+','1.8','A'], ['Gecko','Camino 1.5','OSX.3+','1.8','A'], ['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'], ['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'], ['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'], ['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'], ['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'], ['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'], ['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'], ['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'], ['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'], ['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'], ['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'], ['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'], ['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'], ['Gecko','Epiphany 2.20','Gnome','1.8','A'], ['Webkit','Safari 1.2','OSX.3','125.5','A'], ['Webkit','Safari 1.3','OSX.3','312.8','A'], ]; $(document).ready(function() { editor = new $.fn.dataTable.Editor( { "fields": [ { "label": "Nazwa (PL)", }, { "label": "Nazwa (ENG)", }, { "label": "Ilość osób", }, { "label": "Ilość osób", }, { "label": "", } ] } ); // New record $('a.editor_create').on('click', function (e) { e.preventDefault(); editor.create( 'Create new record', { "label": "Add", "fn": function () { editor.submit() } } ); } ); // Edit record $('#example').on('click', 'a.editor_edit', function (e) { e.preventDefault(); editor.edit( $(this).parents('tr')[0], 'Edit record', { "label": "Update", "fn": function () { editor.submit() } } ); } ); // Delete a record (without asking a user for confirmation) $('#example').on('click', 'a.editor_remove', function (e) { e.preventDefault(); editor.remove( $(this).parents('tr')[0], '123', false, false ); editor.submit(); } ); $('#dynamic').html( '' ); $('#example').dataTable( { "aaData": aDataSet, "aoColumns": [ { "sTitle": "Nazwa (PL)" }, { "sTitle": "Nazwa (ENG)" }, { "sTitle": "Ilość osób" }, { "sTitle": "Ilość osób", "sClass": "center" }, { "sTitle": "", "sClass": "center" }, { "sClass": "center", "sDefaultContent": 'Edit / Delete' } ] } ); } ); [/code]