Search

Hi All I am trying to implement a requirement where clicking on pagination buttons should fetch records from the service and add to the datatable. Also we have incorporated row click to expand/collapse the child rows. Expanding All rows clicking on a link has worked previously before implementing page button on click logic. But now for some reason the logic is not working. Can some one please guide me where I have gone wrong. Below is my code snippet On page load we are displaying 30 records showing 5 per page having 6 page numbers. Now if user clicks on page number 6, we need to hit service and add 30 more records to the datatable. For the first 30 records Expand All/Collapse All is working. but once another 30 records are added my Expand All is not working. On page load am calling callService method. <script> var isCollapse = 1; function callService(){ alert('Hitting Service'); actionfunMTV(); // calls a method in class and oncomplete calls mtvaftercomp method } var sPageNumber = 0; var sPageCriteria = 5; var MTVRemarksDataTable; function mtvaftercomp(res,pageind) { var mtvclaim = res; $("#MTVRemarksTable").dataTable().fnDestroy(); MTVRemarksDataTable = $('#MTVRemarksTable').dataTable({ "ajax": function (data, callback, settings) { callback( JSON.parse(mtvclaim) ); }, "columns": [ { "data": "entitytype" }, { "data": "identifier" }, { "data": "type" }, { "data": "category" }, { "data": "createddate" }, { "data": "text" } ], "bStateSave": false, "lengthMenu": [[5,10,25,50,75,100], [5,10,25,50,75,100]], "sPaginationType": "simple_numbers", "dom": 'B<"top"flp<"clear">>rt<"bottom"ip<"clear">>', "iDisplayLength": sPageCriteria }); MTVRemarksDataTable.fnPageChange(sPageNumber,true); $('#MTVRemarksTable_paginate').on('click', function(event){ var info = MTVRemarksDataTable.api().page.info(); sPageNumber = info.page; //starts from zero index var sRecordsTotal = info.recordsTotal; sPageCriteria = info.length; var sPage; sPage = sRecordsTotal/sPageCriteria; if( (sPageNumber+1) == Math.ceil(sPage)) { callService(); } }); $('#MTVRemarksExpandLink').on('click', function(event) { if(isCollapse == 1){ $('#MTVRemarksExpandLink').html('Collapse All Rows'); isCollapse = 0; } else{ $('#MTVRemarksExpandLink').html('Expand All Rows'); isCollapse = 1; } Accordion_MTVRemarks(); }); $('#MTVRemarksTable tbody').on('click', 'tr', function () { var data = MTVRemarksDataTable.api().row( this ).data(); var tr = $(this).closest('tr'); var row = MTVRemarksDataTable.api().row(tr); if ( row.child.isShown() ) { row.child.hide(); tr.removeClass('shown'); } else { row.child(Expand_MTVRemarks(row.data())).show(); tr.addClass('shown'); } } ); } function Accordion_MTVRemarks() { var rows = MTVRemarksDataTable.fnSettings().aiDisplay; for (index in rows) { var tr = $(this).parents('tr').eq(rows[index]); var row = MTVRemarksDataTable.api().row(rows[index]); if ( isCollapse == 1 ) { row.child.hide(); tr.removeClass('shown'); } else { row.child(Expand_MTVRemarks(row.data()) ).show(); tr.addClass('shown'); } } } function Expand_MTVRemarks( d ) { var MTVRemarksChildTable = ' '; MTVRemarksChildTable += ' Text '+d.accText+''; MTVRemarksChildTable += ' '; return MTVRemarksChildTable; } <apex:actionFunction name="actionfunMTV" action="{!getMtvData}" oncomplete="mtvaftercomp('{!sjsondata Expand All Rows ```

I want to put list in DataTable and Merge the row cell without border.

How to solve this problem?????????

My apologies: I know that my question is a bit like asking how to change a light bulb in a Lear Jet while all of you have already built a few F-117 Nighthawks but I'm ignorant so I have to ask! If I was about 50 years younger I would jump on the learning curves involved because I enjoy the discoveries... but... I learned BASIC on a Radio Shack TRS-80 (aka TRASH-80) and subsequent opsys' up to Win 7 Ultimate 64 bit but just isn't enough TIME to learn the various 'languaqges ' in any depth.. take pity on me, please and either point me in the right directon for a few code snippets I could use or let me know where I would start? JAVA 101? Thanks for your time and consideration... Jim Harmon Palm Springs, CA "Help Stamp out Ignorance!"

When using fixed right columns, there are two functions that do not work as expected. 1) Double click should highlight the contents of the input field. Currently it causes loss of focus. 2) Click and drag to select text inside the input field should highlight the selected text. Currently it causes loss of focus. 3) Sequential single clicks should perform the following: first click focus on the input and place cursor where user clicks, second click highlight the word where the user clicks, third click highlight all text. Currently it causes loss of focus. Because of this, the only way the user can erase the contents of an input box is to click on it then use the arrow keys and delete key to remove the text. I have provided an example in jsfiddle. https://jsfiddle.net/chuyler1/Lttmd56d/

I have a dataTable that, once it finishes loading on the page, it calls $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { return $(table.row(dataIndex).node()).attr('data-status') == 'P'; } ); to filter out to only rows with the data-status = P. Whenever I add a new row: var toAdd = [ 'cell 1', 'cell 2', 'cell 3', 'cell 4', 'cell 5', 'cell 6', 'cell 7', 'cell 8' ]; toAdd.id = someId; toAdd.status = 'P'; table.row.add(toAdd) table.draw(); Nothing pops up. The only way I can actually see the data pop up and filtered by pending is if I do the following: $.fn.dataTable.ext.search.pop(); table.draw(); and then manually use a dropdown to filter out pending results again. Is there anyway to add, and render with the filters still in place?

try it https://datatables.net/extensions/buttons/examples/html5/simple.html :)

SORRY - I figured out a rather silly mistake on my own. Please delete/disregard

I'm referring this example: https://datatables.net/examples/api/show_hide.html Often you have tables with a colspan or rowspan. Is it possible to show/hide such columns? If not, take this as a feature request.

Hi, I'm trying to get the column index by clicking in the relative footer column title. The thing is that this is a fixed footer, hence the click event is triggered by the footer copy (the one used to keep the fixed position). $('.dataTables_scrollFoot').on('click', 'td', function () { var index = $(this).data('column-index'); console.log(index); }); Unfortunately, no data is available on the fixed footer. Do you have any suggestions to get the column index by clicking on a fixed footer? Cheers, Antonio