Dear All,

I had used use below code to hide the Input filter drop-down for particular column .But I am finding no luck with it.

Can any one please help me what's wrong with below line

"columnDefs": [ {
"targets": 1,
} ]

https://jsfiddle.net/spspecalist87/heoo51pu/

Datatables sends requests like this:

locations.json?draw=2&columns[0][data]=name&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false&order[0][column]=1&order[0][dir]=asc&start=0&length=15&search[value]=&search[regex]=false&q=&_=1578103827076

I have specified column names in my JS files and data attributes in my HTML. Can't Datatables return the proper labels i.e. name, description, etc. This way I can pars the parameters easy in my controllers.

While using buttons.colVis.min.js in python Module not found: Error: Can't resolve 'datatables.net-buttons' error is showing while building webpack

import order is given below

import d3 from 'd3';
import dt from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import './fixedHeader.dataTables.min.css';
import './colReorder.dataTables.min.css';
import './buttons.dataTables.css';

import { fixDataTableBodyHeight, d3TimeFormatPreset } from '../javascripts/modules/utils';
import './report.css';
import './dataTables.rowGroup.min.js';
import './dataTables.select.js';
import './dataTables.buttons.js';
import './buttons.colVis.min.js';
import './dataTables.fixedHeader.min.js';
import './dataTables.colReorder.min.js';
import bootbox from './bootbox.min.js';
import toastr from './toastr.js';
import './toastr.css';
//import './dataTables.rowGroup.js';
import { sectionsToRender } from '../javascripts/explore/stores/visTypes';

What is am doing wrong here?.Please help.

I'm having a strange problem with a datetime field in the editor: When I edit an existing row, the particular field in question displays the datetime field as [object Object] the first time I edit a row. After that, it always defaults to the current date in the editor field, no matter what the previously saved date is.

My Javascript code for the field in question is:

            {
                "label": "Date Due: ",
                "name": "duedate",
                "type": "datetime",
                "placeholder": "Choose Due Date",
                                "dateFormat": $.datepicker.ISO_8601,
                "opts": { firstDay: 0 }
            },

I do some computation server-side to facilitate the filtering requirements for this field. My PHP code for this field is:

        Field::inst( 'duedate' )
            ->validator( Validate::notEmpty() )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( function( $val, $data, $opts) {
                global $id;
                $filterDate = '';
                $displayDate = date("Y-m-d", strtotime( $val) );
                if ( strtotime($val) < strtotime('today') ) {
                    $filterDate = 'overdue';
                } elseif (strtotime($val) === strtotime('today')) {
                    $filterDate = 'today';
                } elseif (strtotime($val) === strtotime('tomorrow')) {
                    $filterDate = 'tomorrow';
                } else {
                    $filterDate = 'beyond';
                }
                //  Now build an object in JSON format
                $dueDateObj = (object) [
                    'filterDate' => $filterDate,
                    'displayDate' => $displayDate
                ];
                return $dueDateObj;
            } )
            ->setFormatter( function( $val, $data, $opts) {
                return date("Y-m-d", strtotime($val));      
            } ),

I've tried a couple of variations that have not helped, because I do't really see another way to do what I'm aiming at.

Recently I tried to get the plugin slidingChild running but most likely I missed something to initialize it correctly.
I want to use it together with the responsive extension to show/hide the child rows animated.

Is there somewhere a documentation and examples on how to use it?

Many thanks in advance!

Hi,
I have the odd datatable throughout my site. I'm using stateSave to maintain pagination etc. when the user drills down on a certain item and then returns using a javascript 'back' button. This all works great. I had to use stateSave because on mobile etc. if device is getting low memory and you use the javascript back button, the table will reload the data. So stateSave solved this dilemma.

Problem is, I'm wanting to clear any stateSave if the user clicks on any main menu buttons.

for example:
I'm on my 'inventory page' where there is a datatable. Each row has a clickable item so the user can drill down to get more info (for example a detail page of the item in the row). There is a javascript 'back()' button in case they wish to return to the datatable listing... and keeps their pagination etc. using stateSave.

but: if they click on any of the main menu items in the navigation of the site, I need to clear any/all stateSaves

Can I call a function to clear ALL datatables stateSaves so if they navigate back to any datatable on the site, the saved states are all gone?

Sorry its a long winded explanation, just wanted to be sure you knew exactly what I was meaning.

Thanks in advance for any help.

ps: the reason I'm looking to clear ALL the tables is I'm thinking the user will navigate away to other site pages and if they return to a table they have previously used, they will have forgotten / not realize its being filtered, sorted on some page other then page 1

Hi
I'm trying to moove the input field for column search out of header/footer, so that it has an input cell outside the main table. Much like this example: "https://datatables.net/examples/plug-ins/range_filtering.html" has for integer values. But I cannot get it to work. I want to use html td class laerer for input instead of header. My columnsearch is inside a initComplete because of fixed columns.

initComplete: function () {
    // Generating search fields in table header
        var api = this.api();
        $('.search-sort', api.table().header()).each( function (i) {
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="'+title+'" />' );
        } );
            // Apply the search
        table.columns('.search-sort').every( function () {
        var that = this;
        var searchTextBoxes = $(this.header()).find('input'); //

        $( 'input', this.header() ).on( 'keyup change', function () {
          if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
        searchTextBoxes.on('click', function (e) {
            e.stopPropagation();//den kode, der gør, at der ikke sorteres ved klik i forvalg
            })
        } );
     }, // Slutning af initComplete

Html code

<table border="0" cellspacing="5" cellpadding="5">
        <tbody>
          <tr>
            <td>Lærer:</td>
            <td><input type="text" class="laerer" name="min"></td>
            <td>Hold:</td>
            <td><input type="text" id="max" name="max"></td>
          </tr>
        </tbody>
    </table>
            <table id="example" class="display nowrap" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th><!-- 0 -->
                        <th>Nr</th>
                        <th>Fag/aktivitet</th>
                        <th>Skema</th>
                        <th>Bem.</th>
                        <th class="toggle search-sort">Lærer</th>

Hope someone can help me.
Claus

hi
I'm going to design a sports table
Where the results of several rounds of athlete competitions are aggregated and the athletes are sorted by the sum of the multiple stages.
You can send me a clear example.
Thankful

Professional manufacturers of semi auto hydraulic pipe bending machine in China. Welcome to shop online for quality,Website:https://www.pipebendermachine.com, durable, safe and cheap machine for sale with our factory.

I am using editor 9.2
The table doesn't load when I use where condition and upload field together.
When I remove upload fileds, the dataTable with where clause works nicely.

What should I do to use upload fields while using where clause.
Please help..

Regards,
Shatrughan Sangwan

Hi

I am looking to have some columns have select inputs and the rest have text inputs. I haven't been able find any examples. Is it possible to do this?

Hello everyone, i have a problem implenting this filter. It only shows one page instead of all data.

Also i'm working laravel-adminlte

This's my index.blade.php (view)

@extends('adminlte::layouts.app')

@section('main-content')
    <!-- /*------------------CSS------------------*/ -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
    <!-- /*------------------CSS------------------*/ -->

    <!-- /*------------------Contenido------------------*/ -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h1 class="box-title"><b>Productos</b></h1>
                        @can('products.create')
                        <a href="{{ route('products.create') }}"><i class="btn btn-sm btn-success fa fa-plus-circle pull-right"> Crear</i></a>
                            <!-- <a href="{{  route('products.create')  }}" class="btn  btn-primary fa fa-plus-circle">Crear</a> -->
                        @endcan
                    </div>
                    <div class="box-body">
                        <table class="table table-responsive table-striped table-bordered" id="products">
                            <thead>
                                <tr>
                                    <th width="10px">ID</th>
                                    <th>Nombre</th>
                                    <th>Descripcion</th>
                                    <th>&nbsp;</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th width="10px">ID</th>
                                    <th>Nombre</th>
                                    <th>Descripcion</th>
                                    <th>&nbsp;</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div> <!-- /.box-body -->
                </div> <!-- /.box -->
            </div>
        </div>
    </section>
    <!-- /*------------------Contenido------------------*/ -->

    <!-- /*------------------Script------------------*/ -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

    <script>
        $(document).ready( function () {
            $('#products').DataTable({

                // "dom": '<"row"<"col-sm-4"l><"col-sm-6"f>>t<"col-sm-6"p><i>',
                "serverSide":true,
                "ajax": "{{ url('api/products') }}",
                "columns":[
                    {data: 'id'},
                    {data: 'name'},
                    {data: 'description'},
                    {data: 'btn'},
                ],

                initComplete: function () 
                {
                    this.api().columns([0,1,2]).every( function () //Columnas a mostrar
                    {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).empty() )
                            .on( 'change', function () {var val = $.fn.dataTable.util.escapeRegex($(this).val());
                            column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                        });
                        column.data().unique().sort().each( function ( d, j ) 
                        {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        });
                    });
                }
                
            });
        });
    </script>
    <!-- /*------------------Script------------------*/ -->


    @endsection

And this's how it's shows

Hope you can help me

Gotten pretty far into the project and everything runs smooth.
I came across one thing though:
Is there an easy way to use a custom "SELECT COUNT(xxx) FROM table WHERE value = xxx" and return this to the client? This field is only to show how many rows that exist in another table with that special value... This field will not be updated or created. Like this for example: If Ihave 3 tables here, authors, genres and authorgenreconn(this is used to bind author and genre together since one author can have many genres), But in other fields I want to show how many books each author has, both total and in different genres.
So I would need something like:
Field::inst(SELECT COUNT(book_id) FROM books where author_id = authors.author_id)
and for example
Field::inst(SELECT COUNT(book_id) FROM books where author_id = authors.author_id AND genre_id = xxx)

Editor::inst( $db, 'authors', 'author_id' )
    ->field(
        Field::inst( 'authors.author_name' ),
        Field::inst( 'authors.author_added_date' ),
        Field::inst( 'authors.authorstatus_id' )
            ->options( 'authorstatus', 'authorstatus_id', 'authorstatus_name' ),
        Field::inst( 'authorstatus.authorstatus_name' ),
        Field::inst( 'authorstatus.authorstatus_label' )
            ->set (false)
    )
    ->leftJoin( 'authorstatus', 'authorstatus.authorstatus_id', '=', 'authors.authorstatus_id' )
    ->join(
        Mjoin::inst( 'genres' )
            ->link( 'authors.author_id', 'authorgenreconn.author_id' )
            ->link( 'genres.genre_id', 'authorgenreconn.genre_id' )
            ->order( 'genre_name asc' )
            ->fields(
                Field::inst( 'genre_id' )
                    ->options( 'genres', 'genre_id', 'genre_name' ),
                Field::inst( 'genre_name' )
            )
    )
    ->process($_POST)
    ->json();

Hi,
Happy 2020,
I'm facing a problem with 4000+ rows data, when using select2 plugin. Is there any trick to speed up the loading process?
I'm using standard code

my php code

Field::inst( 'tdpenerimaanbarang.idmhbarang' )
   ->options( Options::inst()
   ->table( 'mhbarang' )
   ->value( 'id' )
   ->label( ['kode','nama'] )
   ->where( function ($q) {
      $q->where( 'is_active', 1 );
   })
  ->render( function ( $row ) {
      return $row['kode'].' - '.$row['nama'];
   } )
  ->order( 'nama' )
  ),
Field::inst( 'mhbarang.kode' ),
Field::inst( 'mhbarang.nama' ),

my js

fields: [ 
{
   label: "Barang:",
   name: "tdpenerimaanbarang.idmhbarang",
   type: "select2"
}

Link Demo
please advise, thank you

BR,
Danny

Hi
I'm trying to put html input fields for filtering into a toolbar (to save space). I've succeded in putting the fields into the toolbar floating left, so they ar next to the search field, but they do not work, when they are inside a toolbar. They work fine outside the toolbar. I cannot find any examples of this in all your fine examples. I can see the input fields and I can type into them, but they do not filter.
Any ideas?

dom: '<"toolbar">Bfrtip',//Stort B tillader Buttons at dannes
    fnInitComplete: function(){
           $('div.toolbar').html('<tbody><tr><td> Lærer: </td><td align="center"><input type="text" class="column_filter" id="col5_filter"></td><td> Hold: </td><td align="center"><input type="text" class="column_filter" id="col6_filter"></td></tr></tbody>');
         },

Claus

Hi, all!
I've created the new Plugin as a replacement for old fnFakeRowspan (http://datatables.net/plug-ins/api/fnFakeRowspan) plugin. It works both for standalone and server-side processing. Now it has several drawbacks but will be implemented in future.

Now it:

• Supports nested multi grouping rows
• Works with standalone
• Works with server side processing
• Initial order initialization for not groupped columns
• Support change order while running (also multi-columns with 'Shift' button)

Please try it Live at http://live.datatables.net/bodanole/1/

and Fork or make Feature request at Github https://github.com/ashl1/datatables-rowsgroup

Example usage:

var data = [
    ['subgroupN', 'Group1', 'sub-subgroupN', 'ElementN', '2Element N'],
    ['subgroup1', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'],
    ['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'],
    ['subgroup2', 'Group2', 'sub-subgroup1', 'Element2', '2Element 2'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element3', '2Element 2'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element4', '2Element 4'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element2', '2Element 2'],
    ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'],
    ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'],
    ['subgroup4', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'],
    ['subgroup4', 'Group2', 'sub-subgroup3', 'Element10', '2Element 17'],
    ['subgroup4', 'Group2', 'sub-subgroup3', 'Element231', '2Element 211'],
  ];
var table = $('#example').DataTable({
    columns: [
        {
            title: 'First group',
        },
        {
            name: 'second',
            title: 'Second group [order first]',
        },
        {
            title: 'Third group',
        },
        {
            title: 'Forth ungrouped',
        },
        {
            title: 'Fifth ungrouped',
        },
    ],
    data: data,
    rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows groupping is applied
                // (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)
        'second:name',
        0,
        2
    ],
    });

Hi,
is it possible to use the uploadmany type without having a n_m table - but just with a field
that contains the ids of the images - separated by a separator.

I am thinking about a comparable way as to define a multi selection using "select2" (or "selectize").
i.e.

Image table as in your examples
i.e. "usertable" with fields: firstname - name - age - images
The field "usertable.images" being a varchar - containing the references to the image-ids - e.g. "1;3;5"
for the images with the ids 1,3,5.

Is this possible?
Thank you very much!

CSHTM: MVC4

JS:-

<!-- DataTables -->
<link type="text/css" href="~/media/css/jquery.dataTables.min.css" rel="stylesheet">
<script type="text/javascript">

    $(document).ready(function () {
        $('#tblEmployee').DataTable({
            "order": [[4, "desc"]],
            destroy: true,
            retrieve: true,
            "ServerSide": true
        });
    });

Is there a way to extend Editor to allow for in-line create?

Hi,
I'm using footerCallback to add the total amount of selected product, every thing is working fine except getting the total here is my code:

`

                            footerCallback:  function (row, data, start, end, display) {
                                        var api = this.api(), data;
                                        // Remove the formatting to get integer data for summation

                                        var intVal = function (i) {
                                            return typeof i === 'string' ?
                                                i.replace(/[\$,]/g, '') * 1 :
                                                typeof i === 'number' ?
                                                    i : 0;
                                        };

                                        // Total over all pages
                                        totalsum = api.column(3)
                                            .data()
                                            .reduce(function (a, b) {
                                                return intVal(a) + intVal(b);
                                            }, 0);

                                        $(api.column(3).footer()).html(
                                            '(' + totalsum + ' SAR) '
                                        );
                                    },

`

the odd thing is that when I change the api.column(3) to api.column(2) - which is not the wonted column- it works fine!