Hello, I need hide/show columns of row childs when I hide/show columns of parent. Datatable have functions to that?

I'm having some difficulty getting something very simple to load using the ajax option. I've tried a variety of different solutions, involving both modifying my AJAX as well as my JavaScript, and nothing seems to be working. My JSON is valid, and follows the pattern shown here:

Just as a test, I'd simply like this table:

To display the value in "location" from each element inside of "data."

My JavaScript looks like this:

I always get this warning:

And nothing displays inside the table. Is there something I'm missing?

I have a datatable with some defined columns. Most of them have data set to a specific item from the json I feed to it via ajax, however for one of the columms in datatable I have set data:"" and I use the render function to add some buttons to this column.
The unusual thing is that I would like these buttons to be searchable. So if I for example have a button called "Active" I want to be able to search for Active, but this does not work.
Would be nice to have something like renderSearchString, but I am sure there is another way to do this?

Kind regards
Jens

Hi

Using Visual Studio, Android Studio, Eclipse etc there is usually some kind of property window with two columns.

The left column has a name and the right column has a value.

The value can be either of:
TextField with different validation rules
Dropdown
ON/OFF slider

Can this type of table be done with DataTables and DataTables.Editor easily or is it not fit for purpose?

I love the layout of the DataTable but I understand that there will not be a single line a like in this scenario, is it suitable for this?

Kind regards
Jens

so I have

var groupsTable = $('#groups-table').DataTable({
                "paging": false,
                "ordering": true,
                "searching": true,
                "info": false,
                "scrollY": 300,
                "columnDefs": [
                    { "orderable": false, "targets": 4 },
                    { "searchable": false, "targets": 4 }
                ],
                "deferRender": true,
                "data": createGroupData(),
                "columns": [
                    { data: "Name", className: "font-weight-normal" },
                    { data: "Owned" },
                    { data: "Total" },
                    { data: "OwnedSum" },
                    { data: "Name", render: function (data) { return editTemplate.render(data); } },
                    { data: null, className: "hidden-column" },
                    { data: null, className: "hidden-column" }
                ]
            }).draw();

and I want to reload this table with the same createGroupData() function when that function is called. So something like groupsTable.reload(). Any suggestions? I tried groupsTable.clear().rows.add(createGroupData()), but it complains cause I have custom columns.

I have this stupid hack data in my database:

<script>console.log('LOOOOOOOL'); alert('LOOOOL');</script>Sobat Bulat menjual berbagaimacam jajanan berbentuk bola mulai dari yang manis-manis hingga gorengan. Menu kami antara lain bola udang, bola ayam bawang, bola jagung kentang, dan masih banyak lagi.

then I use datatable with server-side type to display it, then the alert show up. How to prevent it? I've tried to encode the html entities via columnDefs render function but not working. alert still showing up. I want to display it encoded (raw text). please help.

Error: Invalid library specification.

Errors in both Chrome and IE.

I registered and it still doesn't work.

I implemented Alphabet input search plugin from the blogs
https://datatables.net/blog/2014-09-22

But can't figure how to modify it so it can store the search in savestate.
My table has stateSave on and it saves items in the search and pagination information but it will not store th letter clicked on. Any ideas how to make that work?

Hi,

on SmartAdmin Template with angular 7 I use the Datatables with an Ajax request.

The data look like (assets/data.json):

{
  "data": [
    {
      "id": 1,
      "name": "Tester 1",
      "campaigns": 12
    },
    {
      "id": 2,
      "name": "Tester 2",
      "campaigns": 3
    },
    {
      "id": 3,
      "name": "Tester 3",
      "campaigns": 0
    },
    {
      "id": 4,
      "name": "Tester 4",
      "campaigns": 1
    },
    {
      "id": 5,
      "name": "Tester 5",
      "campaigns": 11
    }
  ]
}

My Datatables component looks like:

import { Component, Input, ElementRef, AfterContentInit, OnInit } from '@angular/core';

@Component({
    selector: 'app-datatable',
    template: `
        <table class="dataTable responsive {{tableClass}}" width="{{width}}">
            <ng-content></ng-content>
        </table>
    `
})
export class DatatableComponent implements OnInit {
    @Input() public options: any;
    @Input() public filter: any;
    @Input() public detailsFormat: any;
    @Input() public paginationLength: boolean;
    @Input() public columnsHide: boolean;
    @Input() public tableClass: string;
    @Input() public width = '100%';
    constructor(private el: ElementRef) {}
    ngOnInit(): void {
        this.render();
    }
    render() {
        const element = $(this.el.nativeElement.children[0]);
        let options = this.options || {};
        let toolbar = '';
        if (options.buttons) { toolbar += 'B'; }
        if (this.paginationLength) { toolbar += 'l'; }
        if (this.columnsHide) { toolbar += 'C'; }
        if (typeof options.ajax === 'string') {
            const url = options.ajax;
            options.ajax = {
                url: url
            };
        }
        options = $.extend(options, {
            dom:
                '<"dt-toolbar"<"col-xs-12 col-sm-6"f><"col-sm-6 col-xs-12 hidden-xs text-right"' +
                toolbar +
                '>r>' +
                't' +
                '<"dt-toolbar-footer"<"col-sm-6 col-xs-12 hidden-xs"i><"col-xs-12 col-sm-6"p>>',
            oLanguage: {
                sSearch:
                    '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> ',
                sLengthMenu: '_MENU_'
            },
            autoWidth: false,
            retrieve: true,
            responsive: true,
            initComplete: (settings, json) => {
                element
                    .parent()
                    .find('.input-sm')
                    .removeClass('input-sm')
                    .addClass('input-md');
            }
        });
        const _dataTable = element.DataTable(options);
        if (this.filter) {
            element.on('keyup change', 'thead th input[type=text]', function() {
                _dataTable.column(
                    $(this).parent().index() + ':visible'
                ).search(this.value).draw();
            });
        }
        if (!toolbar) {
            element.parent().find('.dt-toolbar')
                .append(
                    '<div class="text-right">' +
                    '<img src="assets/img/logo.png" alt="" style="width: 111px; margin-top: 3px; margin-right: 10px;">' +
                    '</div>'
                );
        }
        if (this.detailsFormat) {
            const format = this.detailsFormat;
            element.on('click', 'td.details-control', function() {
                const tr = $(this).closest('tr');
                const row = _dataTable.row(tr);
                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
        }
    }
}

on the template I use it like:

<app-datatable [options]="{colReorder: true, ajax: 'assets/data.json', columns: [ { data: 'id' }, { data: 'name' }, { data: 'campaigns' } ]" paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<td data-hide="phone">ID</td>
<th data-class="expand">Name</th>
<th>Campaigns</th>
<th data-hide="phone" class="text-right">Action</th>
</tr>
</thead>
</app-datatable>

How can I add an action column on every row without define it in the data source (so I mean over the component)?

Hello -- does anyone know how to add additional content to a non editable cell within the Inline Editor?

I have the Inline Editor setup and working great but in one column I'd like to add an html button/icon that is displayed after the database content such that the user can click to navigate to some url. Similar to the edit icon but instead of editing the field, I'd like the edit icon to popup a url in a new window.

{
name: "Database.Field" + <a href="url" target="_blank" class="btn-primary">Click</a>,
editField: false
}

Is something like this possible? Thanks!

Hello,

First question here and recently started using DataTables.

I am having trouble with an ajax call to the server - I am getting the errors:

Notice: Undefined index: length in C:\xampp\htdocs\testing\fetch.php on line 37
Notice: Undefined index: start in C:\xampp\htdocs\testing\fetch.php on line 38
Notice: Undefined index: length in C:\xampp\htdocs\testing\fetch.php on line 38

I have provided a link to my github pages where the pertinent code resides:
https://github.com/ewanlp/BoardGameSite/blob/testing-luke/pages/players.php
https://github.com/ewanlp/BoardGameSite/blob/testing-luke/testing/fetch.php

Debugging has not shown me anything as far as I know, but here is link to that as well:
http://debug.datatables.net/uguzow

The page appears to work how it should - I am able to sort, order, and paginate successfully. This said, these notices are indicating that my query is not correct. This is because the length and start values are not being filled in my query. I find this odd because when I debug my code I get this:

Data source Server-side Ajax
Processing Server-side
Draws 1
Columns 3
Rows 10
Display start row 0
Display length 10

The values length and start are being returned with values to the server. I'm not sure if I'm interpreting this correctly, and if there is some clarification that anyone can provide, that would be much appreciated!

Thanks for any help.
Luke

I'm using the datatable example of child rows without the ajax and im having a problem where my child rows all have the same data.

function format ( d ) {
                // `d` is the original data object for the row
                return '<div class="col-md-8" style="padding-top:20px;">'+
                '<table class="table table-bordered">'+
                    '<tr>'+
                            '<th>'+
                                "Product Name"+
                            '</th>'+
                            '<th>'+
                                "Quantity"+
                            '</th>'+
                        '</tr>'+                
                        '<tr>'+
                            '<td>'+
                                "data here"+
                            '</td>'+
                            '<td>'+
                                "data here"+
                            '</td>'+
                        '</tr>'+
                '</table>'+
                '</div>';
            }
            $('#manageOrderTable tbody button').on('click', function () {
            var tr = $(this).closest('tr');
            var row = t.row( tr );
    
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
            } ); 

This is my table:

 <tbody>
                                @php 
                                $x=0; 
                                @endphp
                                @foreach ($orders as $order)                                  
                                <tr>
                                    <td></td>
                                    <td>{{$order->order_date}}</td>
                                    <td>{{$order->client_name}}</td>
                                    <td>{{$order->client_contact}}</td>
                                    <td class="details-control">
                                        <button class="btn btn-info btn-xs">
                                            <b>Items : </b> {{$item_count["$x"]}} 
                                        </button>
                                        Item Id: @for ($y = 0; $y < $item_count["$x"]; $y++)
                                                {{$item_list["$y"]->product_id}}
                                            @endfor
                                        
                                        {{-- <!-- Split button -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn btn-info btn-xs"><b>Items : </b> {{$item_count["$x"]}}</button>
                                            <button type="button" class="btn dropdown-toggle btn btn-info btn-xs" data-toggle="collapse" data-target="#extra_info{{$x}}" aria-haspopup="true" aria-expanded="false">
                                            <span class="caret"></span>
                                            </button>
                                        </div>--}}
                                        
                                        {{-- <div id="extra_info{{$x}}" class="collapse">
                                            @for ($y = 0; $y < $item_count["$x"]; $y++)
                                                {{$item_list["$y"]->product_id}}
                                            @endfor
                                              
                                        </div>                                                  --}}
                                    </td>
                                    @if ($order->payment_status==1)
                                    <td><label class="label label-success">Full Payment</label></td>
                                    @elseif($order->payment_status==2)
                                    <td><label class="label label-info">Advance Payment</label></td>
                                    @else
                                    <td><label class="label label-warning">No Payment</label></td>
                                    @endif
                                    <td>
                                        <!-- Single button -->
                                        <div class="btn-group">
                                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Action <span class="caret"></span>
                                          </button>
                                          <ul class="dropdown-menu">
                                            <li><a href="{{route('orders.edit',$order->order_id)}}" id="editOrderModalBtn"> <i class="glyphicon glyphicon-edit"></i> Edit</a></li>
                                            
                                            <li><a type="button" data-toggle="modal" id="paymentOrderModalBtn" data-target="#paymentOrderModal" data-due="{{$order->due}}" data-id="{{$order->order_id}}"> <i class="glyphicon glyphicon-save"></i> Payment</a></li>

                                            <li><a type="button" onclick="printOrder({{$order->order_id}})"> <i class="glyphicon glyphicon-print"></i> Print </a></li>
                                            
                                            
                                            <li><a href="{{route('orderDelete',$order->order_id)}}" type="button"> <i class="glyphicon glyphicon-trash"></i> Remove</a></li>       
                                          </ul>
                                        </div>
                                    </td>
                                </tr>
                                @php
                                $x++;
                                @endphp
                                @endforeach
                            </tbody>

I want to show the item id of each row in the child table.

When someone adds or deletes from their cart https://datatables-ecommerence.000webhostapp.com/ I need to refresh the new item count. What is the easiest way to call the initComplete function?

"initComplete": function(settings, json){ 
        var info = this.api().page.info();
        $(".shoppingbasket").append("<div class='basketitems'>" + info.recordsTotal + "</div>");
}

Howcome one cannot type it as a regular function count (settings, json){

I could do it the AJAX way something like: $("#cart").load('https://datatables-ecommerence.000webhostapp.com/' + "#cartCount"); if that is more simple.

Hi there. I'm not sure what I am doing wrong here but when I click on the details contro,. the child row is dsiplayed but it pushed to a new column at the end of the data table.

Here is my code:

<div class="col-xs-4">
    <table id="exp_datatable" class="display ">
        <thead>
            <tr>
                <th>AccountNumber</th>
                <th>AccountCostCentre</th>
                <th>AccountDepartment</th>
                <th>Narrative</th>
                <th>TransactionAnalysisCode</th>
                <th>TaxType</th>
                <th>TaxCode</th>
                <th>Amount</th>
            </tr>
        </thead>
    </table>
</div>


<script>    

    $(function() {
        
        $tepTable = $('#exp_datatable').DataTable ( {
            ajax: { // doing it this way allows me to invoke ajax.reload
                url: '../ajax/transactions.php',
                type: 'POST',
                data: {action:'get export preview'},
                dataType: 'json',
                dataFilter: function(data){
                    var jData = JSON.parse(data);
                    var dtData =JSON.stringify( {"data": jData});
                    return dtData;
                }
            },
            responsive: true,
            columns: [
                        { data: "nom_code" },
                        { data: "account_cost_centre" },
                        { data: "account_dept" },
                        { data: "narrative" },
                        { data: "trans_analysis_code" },
                        { data: "tax_type" },
                        { data: "tax_code" },
                        { data: "amount" }
            ]
        });        
    });

    
</script>

My table looks like this:

And here it is with the child row displayed:

I'm really stuck so any help is very much appreciated. Thank you,

Lee

I have a basic question. When I download DataTables using the given options such as option for buttons, print, search etc and the download all the files, which of these files do i need? For example, in addition to the core datatables css and js, there are button folders etc. Inside this button folder, there is over 10 css and js files. Do i need all of them to show the buttons? Do i need all the other css and js files for datatables to work as intended?

Is there a way to keep Bootstrap 4 buttons from spilling out of the viewport? Even the ones in the example seem to do it but in BS4's documentation, button menus automagically stay in view.

Hi, sorry for my english, i'm from argentina.
My ask is, How search a specific column with the search input, because this search all the colums, i need that search only one colum.

I have a table with colums: "ID", "Name", "Price", "Description", where i search by name, but also search others columns

$(document).ready(function() {
$('#instale').DataTable({
    "ordering": false,
    "searching": true
});

I tried the code -

$('#NACH-User-Table').on( 'click', 'tr', function () {
var userId = table.row( $(this).parents('tr') ).data();
alert( "UserID = "+userId[0] );
} );

But getting UserID = undefined.

Hello,

I'm still new to Javascript, so any apologies if I missed anything. I have JSON data being passed to DataTables. Currently, I can click on a row to fetch all the data for that particular row. However, now I need to do almost the same thing but rather than click on the row, I'll need to render a specific column that still displays its data and have a link that will capture all the data for that particular row.

I've gotten the render to show "data" but I can't get it to show the data its suppose to show. For instance Case Number: "1234" should show "1234" but it shows "data". Then the link needs to be able to fetch that row's data.

Below is the current code I have:

// READY FUNCTION
$(document).ready(function() {
    var obj = $('#tempDataForm').serializeJSON();
    query('discrepancyList',obj,refreshDiscrepancyTable,0,"queryDiscrepancy.php");
});

function refreshDiscrepancyTable(response) {
    if(response.result.state == 'success') {
        var refreshedData = response.result.data.results;
        var colNames = response.result.data.colNames;

        if ( $.fn.DataTable.isDataTable('#discrepancyQueue') ) {
            $('#discrepancyQueue').DataTable().destroy();
        }

        $('#discrepancyQueue').DataTable( {
            data: refreshedData,
                    ``` // Allows row to be clicked to capture rows data
            "fnDrawCallback": function( oSettings ) {
                $('#discrepancyQueue').on( 'click', 'tr', function () {
                    var table = $('#discrepancyQueue').DataTable();
                    // Gets the row values
                    var rawData = table.row( this ).data();
                    var data = (JSON.stringify(rawData));
                });
            },```
            columns: colNames,
            responsive: true,
            // Hides "Id" columns and makes it not searchable
            "columnDefs": [
                {
                    "targets":  [ 0 ],
                    "visible": false,
                    "searchable": false
                },
                ```{
                    "targets": [ 1 ],
                    "data": "Case Number",
                    "render": function ( data, type, row, meta ) {
                    return '<a href="'+data+'">data</a>';
                    }
                } ```
            ]
        });

        var myTable = $('#discrepancyQueue').DataTable();
        notify('success','Test!');
    } else {
        notify('warn','Error!');
    }
}

Any help on this would be greatly appreciated.