Search

Spent many days figuring this out and can´t find an answer in forum.Hopefully someone out there can help me out :) I want my styles from column "Teatergrupp" and column "Status" to follow along inside child when I resize the window and thoose columns appear there. See page here:denlillateatern.se/2017/datatabell/tabell.php Part of code here: $( document ).ready( function () { var dt = $( '#example' ).DataTable( { "responsive": true, "processing": true, "serverSide": true, "ajax": "scripts/ids-objects.php", "columnDefs": [{ "targets": [6], "createdCell": function(td, cellData, rowData, row, col) { switch(cellData) { case "Utsålt": $(td).addClass('utsalt'); break; }}},], "columns": [ { "orderable": false, "data": null, "defaultContent": "" },{ "data": "fst_datum", className: "all" }, { "data": "fst_tid", className: "all" }, { "data": "fst_namn", className: "all" }, { "data": "grupp_namn", className: "min-phone" }, { "data": "age", className: "min-phone" }, { "data": "show_not", className: "min-phone" }, { "data": "boka", className: "min-phone", render: function ( data, type, row ) { if ( row.boka.substring( 0, 1 ) == '0' ) { return row.boka; } else { return '<a href="' + row.boka + '">Boka online</a>';}} }, { "data": "img", className: "none", "render": function ( data, type, row ) { return '<img src="' + data + '" />';} }, { "data": "fst_beskrivning", className: "none" } ], "order": [ [ 1, 'asc' ] ], ],} ); var detailRows = []; $( '#example tbody' ).on( 'click', 'tr td.details-control', function () { var tr = $( this ).closest( 'tr' ); var row = dt.row( tr ); var idx = $.inArray( tr.attr( 'id' ), detailRows ); if ( row.child.isShown() ) { tr.removeClass( 'details' ); row.child.hide(); // Remove from the 'open' array detailRows.splice( idx, 1 ); } else { tr.addClass( 'details' ); row.child( format( row.data() ) ).show(); // Add to the 'open' array if ( idx === -1 ) { detailRows.push( tr.attr( 'id' ) ); } } } ); // On each draw, loop over the `detailRows` array and show any child rows dt.on( 'draw', function () { $('tr td:nth-child(5)').each(function (){ $(this).addClass('image') }); $.each( detailRows, function ( i, id ) { $( '#' + id + ' td.details-control' ).trigger( 'click' ); } ); } ); } );

Hi, I'm using the TablePress plugin on a WordPress site, and the plugin author's shortcode for the fixed header is not working. He looked into the issue, couldn't solve it, and suggested I ask at this forum because his plugin uses the DataTable JS library. Here is a link to our discussion of the issue. I ran your debugger and here is the result I received: "[Violation] Forced reflow while executing JavaScript took 81ms." The web page having this issue with the fixed header is http://mf2.openairwebdesign.com/music-sitting-together-songbook/. Very much appreciate any help you can offer. Thanks, Suzanne

I want to load the data on the server side (server side) but when looking for any content I do not want to be server side with sql queries for example: Quiero cargar los datos del lado del servidor (server side) pero a la hora de buscar cualquier contenido no quiero que se haga del lado del servidor con consultas sql por ejemplo: if( !empty($params['search']['value']) ) { $where .=" WHERE ( nombre LIKE '%".$params['search']['value']."%' )"; $where .=" OR employee_salary LIKE '".$params['search']['value']."%' "; $where .=" OR employee_age LIKE '".$params['search']['value']."%' )"; } Is there any way to do this?

here is my code :smile: this.x.then(df => { let rowsData = this.table.column(0).data().unique(); $("#Addfilters").click(function() { console.log(rowsData); }); }); but this is giving me a error : a.slice is not a function . thanks in advance

select @i:=@i+1 AS RowNum,A.ReceiptNo as ReceiptNo,DATE_FORMAT(A.ReceiptDate,'%d-%m-%y') as ReceiptDate,G.Name as Guest,R.Name as Room,A.Amount from advancereceipt A LEFT JOIN guestmaster G ON A.Guest = G.Code LEFT JOIN roommaster R ON A.Room = R.Code, (SELECT @i:=0) AS foo where (Search IS NULL Or A.ReceiptNo like CONCAT('%' , Search , '%') Or DATE_FORMAT(A.ReceiptDate,'%d-%m-%y') like CONCAT('%' , Search , '%') Or G.Name like CONCAT('%' , Search , '%') Or R.Name like CONCAT('%' , Search , '%') Or A.Amount like CONCAT('%' , Search , '%')) order by case when SortDir <> 'ASC' then '' when SortCol = '1' then A.ReceiptNo end ASC, case when SortDir <> 'DESC' then '' when SortCol = '1' then A.ReceiptNo end DESC, case when SortDir <> 'ASC' then '' when SortCol = '2' then A.ReceiptDate end ASC, case when SortDir <> 'DESC' then '' when SortCol = '2' then A.ReceiptDate end DESC, case when SortDir <> 'ASC' then '' when SortCol = '3' then G.Name end ASC, case when SortDir <> 'DESC' then '' when SortCol = '3' then G.Name end DESC, case when SortDir <> 'ASC' then '' when SortCol = '4' then R.Name end ASC, case when SortDir <> 'DESC' then '' when SortCol = '4' then R.Name end DESC , case when SortDir <> 'ASC' then 0 when SortCol = '5' then A.Amount end ASC, case when SortDir <> 'DESC' then 0 when SortCol = '5' then A.Amount end DESC );

Hey, Attempting to create what is typically a simple layout but using DataTables is proving a little troublesome. I must be missing something as a newcomer to the DataTables community. I have attached a mock-up example of what i am trying to achieve with DataTables. Any pointers / solutions in the right direction appreciated. Thanks in advance.

Hello, I have a problem with the responsive of datatable module. I added an extra tr in the thead section under the header and added an individual column search row however when resizing the first row collapses fine but the second row with the search inputs is not collapsing with the data. how can I fix this Thank

how top up right side display search box work for dynamic data and sorting column for dynamic data ?

Hi, i am letting user enter some data in text field, and on button press,i am calling below JQuery function and making Ajax call inside. Below is my JQuery Function and Input field details. $("#SearchByVIN").click(function() { $("#error").hide(); var formData = $('#vinSerach').serialize(); $.ajax({ type: "POST", url: "ErrorVin", data: formData, crossDomain: false, async : true, success: function(response) { if(response){ $("#error").show(); $("#error").html(response); $(window).scrollTop($('#error').offset().top); }else{ $("#searchResult").show(); $("#searchResult_info").show(); $("#searchResult_paginate").show(); var oTable = $('#searchResult').dataTable( { "bDestroy": true, "iDisplayLength": 2, "bFilter": false, "bFilter": false, "bLengthChange": false, "sAjaxSource": "SearchByVIN", "aoColumns": [ { "mData": "gdId" }, { "mData": "agency" }, { "mData": "documentType" }, { "mData": "countyName" }, { "mData": "organizationName" } ] } ); } }, error: function(result){ alert(result); } }); }); Search By VIN Note that, first i am calling url: "ErrorVin", method in controller. In which, i am properly recieving data in controller using Form Bean. But when it comes in else, i am using "sAjaxSource": "SearchByVIN", but in this case, i am not revieving any jsp input values in controller method mapped with this url. So, if i want to pass input values in this second call, how can i achieve that?

Turns out.... it was $('#tableBody').html(rows) that actually froze it. :# I'm trying to find ways to solve this problem now... :s