Search

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]

With FixedHeaders i wanted to have the cloned header only to show when the original header was not visible. My config is top headers only I just updated the function in the plugin : _fnScrollFixedHeader ( around line 588 ) [code] // Lines where this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style ); is fired this._fnUpdateCache( oCache, 'sDisplay', "none", 'display', nTable.style ); // Lines where this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style ); is fired this._fnUpdateCache( oCache, 'sDisplay', "block", 'display', nTable.style ); [/code] Thought i should share if someone is searching something similar Stefan :)

Hi All, I want to define the maximum width and height for all cells. At present, I'm using with ColReorderWithResize in the Datatable. The problem comes when a larger string comes in one of the column, Datatable expands the cell height or width automatically and that changes the layout. I want that string to use the ' overflow : hidden ' like property in order to make the string display go behind the next column OR achieve something like http://jsfiddle.net/gtRnn/ .. Whenever the column is resized then the data in the cell should show up OR wrapped up with trailing '..'. How can I do this with ColReorderWithResize? Any help is appreciated ! Regards

I've tried a million combinations. I initialize the datatable on document ready; $('#occTableData').dataTable({"sPaginationType": "bootstrap"} ); Here's the HTML: ID Title Description Status Company Account Amount Assigned To Here's the javascript function. You can see the commented out section. I've tried that also.; function populateData() { // Populate Row Data $.ajax( { type: "GET", url: 'api/occ/occStage.htm', data: 'userId='+userId, contentType: 'application/json; charset=utf-8', dataType: "json", success: function(adata) { // $("#occTableData").empty(); /// $("#occTableData").append('IDTitleDescriptionStatusCompanyAccountAmountAssigned To'); occData = adata; /* $.each(adata, function(index,item) { alert(item.title); $("#occTableData").append(''+ ''+item.occStageId+''+ ''+item.title+''+ ''+item.description+''+ ''+item.statusCd+''+ ''+item.companyCd+''+ ''+item.accountId+''+ ''+item.amount+''); $("#occTableData").datatable().fnAddData([item.occStageId,item.title,item,description,item.statusCd,item.companyCd,item.accountID,item.amount,item.assignedToUserid]); }); */ $('#occTableData').dataTable( { "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "_MENU_ records per page" }, "aoColumns": [ { "mDataProp": "occStageId" }, { "mDataProp": "title" }, { "mDataProp": "description" }, { "mDataProp": "statusCd" }, { "mDataProp": "companyCd" }, { "mDataProp": "accountId" }, { "mDataProp": "amount" }, { "mDataProp": "assignedToUserid" } ] }); // $('#occTableData').dataTable().fnAddData([adata]); } // end success }); // end populate OCC data } Here's the JSON data; [{"occStageId":"628","parentOccStageId":"628","instanceOrder":null,"accountId":"100050","companyCd":"RSS","createdDtTm":"2013-05-02","postByDt":"2013-05-02","createdByUserid":"c0123456","createdByName":"sudha Kukkala","billCycleCd":"R16","statusCd":"WORKING","amount":"-200.00","creditOrDebit":"C","chargeCd":"ADJPYMT","title":"occ new","assignedDtTm":"2013-05-02","assignedToUserid":"c0123456","assignedToName":"sudha Kukkala","billPeriodDt":null,"invoiceNo":null,"svcPlanCds":null,"description":"occ new","groupCd":"QAWH","fullName":null,"custAcct":null,"carrierId":null,"opcAccountId":null,"opcChargeCd":null},

please help .... how to do this.. via datatables jquery

am having dynamic drop downs on one column. if i type those text from drop down on search filed, is it possible to retrieve all rows that which dropdown has that text as selected. Tell me a way to do this.

Hello, I've a web site, that display some data with dataTables. The user can filter those data to do a subset selection. My problem is, by clicking on a button (for example), to extract the filtered data (in fact the first column) to do a php treatment. If I can obtain those data, I can then use an Ajax script, it's not a problem. My problem, is how do the extraction ? For example, simply, clicking on a button, how can I have an alert box with those data ? Any tutorial is welcome ! Thank a lot, Sohnic