Search

I have not seen anything in examples where there is code that queries the database and creates a column of data based on the results. Also, I'm not sure where to put this, but it seems that fnServerData looks promising. Is there an example of something like this? (I'm new to datatables.)

$('#tblNotesAll').DataTable({ "destroy": true, "scrollY": "600px", "scrollX": true, "scrollCollapse": true, "ordering": true, "pagingType": "full_numbers", "ajax": { "url": "../Main/GetAllTodaysNotes", "type": "GET", "data": { "stickerdate": datewithslash } }, "sAjaxDataProp": "", "columns": [ { "data": "Account" }, { "data": "NoteDate", "render": function (value) { if (value === null) return ""; var pattern = /Date\(([^)]+)\)/; var results = pattern.exec(value); var dt = new Date(parseFloat(results[1])); return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear(); } } , { "data": "Note", "width": "40%" } , { "data": "FUDate", "render": function (value) { if (value === null) return ""; var pattern = /Date\(([^)]+)\)/; var results = pattern.exec(value); var dt = new Date(parseFloat(results[1])); return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear(); } } , { "data": "User" } ] });

I want to use child rows but also to be responsive. I don't managed to find a solution for this. Can anyone tell me if this is possible? Thanks!

Is it possible to render json data without specifying the headers? my json data is dynamic so i want to dynamically update the headers too. here's my sample json data. "Data": [ { "datetime_read": "2016-01-01 00:00:20", "Air Temperature": "23.6", "Rainfall Amount": "0.0", "Air Pressure": "1013.4" }, { "datetime_read": "2016-01-01 00:15:16", "Air Temperature": "23.5", "Rainfall Amount": "0.0", "Air Pressure": "1013.3", "Wind Speed": "3.24", "Wind Direction": "177.7" }, { "datetime_read": "2016-01-01 00:30:16", "Air Temperature": "23.6", "Rainfall Amount": "0.0", "Air Pressure": "1013.2", "Wind Speed": "5.76", "Wind Direction": "195.0", "Air Humidity": "96.3", "Solar Radiation": "0.0" } ] how can I set the keys as headers? thank you

$scope.dtOptions = DTOptionsBuilder.newOptions() .withDisplayLength(5) .withOption('processing', true) .withOption('serverSide', true) .withOption('bLengthChange', false) var get_all_appointment_data = appointment_services.get_all_appointment_data(API_URL); get_all_appointment_data.success(function (response) { $scope.appointments = response; });

Hi Allan, thanks for Datatable I have a datatable which if fill out from json, I try to control the numbering and pagination, first of all i send the page info (page and lenght) . I use a on change event to get the value of numbering a send I use a on click event to get the value of a numbering like this. $('#tabla_sec_recaudacion').off('draw.dt').on('draw.dt', function () { $('.paginate_button').on('click', function(){ if ($.fn.DataTable.isDataTable('#tabla_sec_recaudacion')){ var info = table_dt.page.info(); console.log("pagina "+info.page+" cantidad"+info.length); data.pagina=info.page; data.numero=info.length; //table_dt.page(info.page).draw(false); sec_recaudacion_get_values(); } }); $('.input-sm').off('change').on('change',function(){ //console.log("ok click pagination"); console.log($(this).val()); if ($.fn.DataTable.isDataTable('#tabla_sec_recaudacion')){ var info = table_dt.page.info(); console.log("pagina "+info.page+" cantidad "+$(this).val()); data.pagina=info.page; data.numero=$(this).val(); //table_dt.page(info.page).draw(false); sec_recaudacion_get_values(); } }); }); i have problems when send the pagination, the page always returns in the number 1, i doesnt change the page i want. please help,thanks in advance.

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