Search

Hi Everyone, Kindly help with reference below code. I want the sort the data of datatable using datepicker of jquery. Could you suggest me that what should i do in this code??? $('#example tfoot th#Bkdate, th#entry').each(function () { var title = $('#example thead th').eq($(this).index()).text(); $(this).html(''); }); dataTableInstance.api().columns().every(function () { var dataTableColumn = this; $(this.footer()).find('input').on('keyup change', function () { dataTableColumn.search(this.value).draw(); }); Regards, vsverma11

I have a small image that I'm displaying for each result, in a row, using fnRowCallback. When the image loads, the search results look a little messy/blurry when typing into the search fields, as the image is being redrawn/reloaded on every keystroke. Can anyone think of a way to avoid this? I tried "searchDelay" but the redraws still seem to happen instantly, and it doesn't seem to work on individual column filtering. Ideally I'd delay the loading of the image until the search redraws have been rendered/displayed.. Many thanks in advance for any suggestions. "fnRowCallback": function( nRow, aData, iDisplayIndex ) { data = strtrunc2(aData.LastReported, 16); data = lightgem(data); $('td:eq(1)', nRow).html(data + '<a href="inv-detail.php?Serial=' + aData.Serial + '">' + aData.ComputerName + '</a>'); return nRow; }, (lightgem is a JS function I added that works out which image to display (green, red, or orange "light") depending on how old the date field is). it just echoes: '<img src="myimage.png>' This isn't a show stopper.. it just looks a bit messier than when the image isn't included.

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