Plug-ins — DataTables forums

I need to add a link in each table record brought from mysqli to another .php file, how can I add t

Gerardyn — Wed, 24 Nov 2021 17:34:40 +0000

***************index.php**************

```

Panel de Entregas a Clientes

N.E	Fecha	Conductor	cliente	L.Entrega	Ticket	Estacion	H.S.T	H.LL.C	H.S.C	H.LL.T	T.A	T.I

```

**************server.php*********************

```$table = 'entregas';

// Llave primaria a usar
$primaryKey = 'id_entrega';
include("server.php");
$consulta= "SELECT * FROM entregas";
$ejecutaConsulta= mysqli_query($conexion, $consulta);
while ($dato=mysqli_fetch_array($ejecutaConsulta)):

$columns = array(
array( 'db' => 'echo $dato["id_entrega"] ', 'dt' => 0),
array( 'db' => 'fecha', 'dt' => 1),
array( 'db' => 'conductor', 'dt' => 2),
array( 'db' => 'cliente', 'dt' => 3),
array( 'db' => 'l_entrega', 'dt' => 4),
array( 'db' => 'ticket', 'dt' => 5),
array( 'db' => 'estacion', 'dt' => 6),
array( 'db' => 'h_s_tienda', 'dt' => 7),
array( 'db' => 'h_ll__cliente','dt'=> 8),
array( 'db' => 'h_s_cliente', 'dt' => 9),
array( 'db' => 'h_ll_tienda', 'dt' => 10),
array( 'db' => 'tiempoActivo','dt' => 11),
array( 'db' => 'timeInactivo','dt' => 12)

);```

datatables.net-plugins 1.11.x for npm

aheritier — Fri, 19 Nov 2021 09:47:17 +0000

Hi team,

I noticed that the plugins received some updates/releases in GitHub with version 1.11.x: https://github.com/DataTables/Plugins/tags
But in NPM that latest is still 1.10.24 : https://www.npmjs.com/package/datatables.net-plugins

Is it expected ?

Can we help to fix it ?

Cheers

SearchBuilder + SearchPanes standalone out of dom option

Mausino — Sun, 14 Nov 2021 12:59:04 +0000

I want use SearchPanes and SerchBuilder standalone in popup windows

Is this possible some have this outside of dom option ?
or is there some example how manipulate the dom rendering of HTML that i move this div with SeachPanes and SearchBulder where i want on page ?

Thank you

Idioma

Rene91 — Wed, 10 Nov 2021 22:25:19 +0000

hola buenas mi consulta es la siguiente,

como puedo cambiar el idioma de la tabla, por que el "buscador", "información de datos a mostrar", "botón de anterior , siguiente"... estos me salen en ingles, si me pueden ayudar porfavor, en como ponerlos a español.

Pagination plug-ins

drill — Fri, 29 Oct 2021 07:22:43 +0000

Hello guys, please is it possible to match the "input" pagination plugin with the default datatable one ????

Column filtering with ScrollX

anasaz — Sun, 17 Oct 2021 06:40:03 +0000

Link to test case: https://onecompiler.com/html/3xenhg27a
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
When I added column filtering with ScrollX, the data columns are not aligned with the filter search box. but when I click inside any search box, then it looks fine.

The full code can be seen here: https://onecompiler.com/html/3xenhg27a

New colResize Option Is Awesome! But Requires Care When Using With colReorder

chbocca — Tue, 19 Oct 2021 03:23:53 +0000

I find the new colResize plugin by Daniel Hobi awesome!

Allan mentions it in What's New. Although the free demo has expired, the plugin definitely works.

Minor detail, but when using in conjunction with colReorder, the user needs to resize only enough to not drag target column too far into next column, else the colReorder kicks in.

Here's link to my simple demo.

I tried mitigating with colReorder.realtime() set to false, but to no avail.

Might be better for end users to suppress colReorder while colResize is engaged. I will try to do this with jQuery .on action, but in mean time, heads-up.

Will send separate note to Daniel as well.

But again, very welcomed addition to dt!

How to use fnFilterOnReturn

Dextr0 — Sun, 17 Oct 2021 21:23:29 +0000

Description of problem: When I was trying to use the data tables default serach available on the top-right corner for the plugin fnFilterOnReturn I'm unable to get any results

$(document).ready(function () {
            $("#ddlJobId").select2();
            $("#ProjectId").select2();
            $("#JobStatusId").select2();
            $("#EmployeeId").select2();          
            $('#refreshbtn').click(function () {
                location.reload();
            $('#TableJobs').dataTable().fnFilterOnReturn();
            });$('#TableJobs').dataTable().fnFilterOnReturn();
            });

            var jobsTable = $('#TableJobs').DataTable({
                "lengthMenu": [20, 40, 60, 100],
                "pageLength": 20,
                "processing":true,
                "serverSide": true,
                "filter": true,
                "language": {
                    "infoFiltered": "",
                    "processing": " 
 Loading...." //"" 
                },
                "ajax": {
                    "url":'@Url.Action("DashboardJobs", "Home")',
                    "type": "POST",
                    "datatype": "json"
                },
                "columnDefs": [{
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                }],
                "columns": [
                    // "EditJob", "EditJob", new { id = x.JobNo }, null) 
                    { "data": "id", "name": "id", "autoWidth": true },
                    {
                        "data": "jobNo", "name": "jobNo", "autoWidth": true, "type": "string",
                        render: function (data,type,job) {
                            return "" + job.jobNo + "";

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

How does one installing DataTables Export Plugin?

abickford — Mon, 11 Oct 2021 15:31:09 +0000

Sorry for the stupid question, but is there a CDN for the DataTables Export Plugin?
TIA

Il ne se passe rien de bon

evpf29b — Thu, 30 Sep 2021 14:17:05 +0000

bonjour
lorsque je veux initialiser les plugins il ne se passe rien.

j'oublie quelque chose ?

How to use Absolute sorting but also sort rows underneath by differnt column

ernie999 — Mon, 27 Sep 2021 14:00:29 +0000

Hello, I'm trying to use the Sorting with Absolute Position plugin to keep a value pinned to the top of the page (works fine) but everything underneath those row I'd like to sort by a different column.

For example in this jsfiddle: https://jsfiddle.net/Ernesto1/4mdogv2a/
the rows with London as the office are pinned to the top but all rows underneath I'd like to sort by age (desc).

However, when I sort the age row I lose the sorting in the office row. Any ideas how I could accomplish this would be greatly appreciated.

This works:

$(document).ready(function() {
    var dispType = $.fn.dataTable.absoluteOrder({
        value:'London', position:'top'
    });
    
    var table = $('#example').DataTable({       
        "columnDefs" : [
        { targets: 2, type: dispType }
    ],
    order: [[2, 'desc']]
    });
    
});

But of course changing the order line like this results in the London rows no longer being pinned to the top.

order: [[3, 'desc']]

thanks

Footer sum() with decimal places

janbesler — Mon, 20 Sep 2021 13:37:57 +0000

Hello,

in one column of my table I output the sum in the footer. For this I use the sum() plugin. Unfortunately the decimal places are not displayed.

Here is my code:

footerCallback: function(row, data, start, end, display) {
  var api = this.api();

  api.columns(".sum", {
    page: "current"
  }).every(function() {
    var sum = this
      .data()
      .reduce(function(a, b) {
        var x = parseFloat(a) || 0;
        var y = parseFloat(b) || 0;
        return x + y;
      }, 0);
    $(this.footer()).html(sum);
  });
},

Values are:

723,08
273,53
12,75
123,75

The output in the footer is 1131.

So it looks like that the decimal places are already ignored during the calculation.

Greetings

Jan

JSON inválido, porém meu JSON é válido!!

GilbertoASJ — Wed, 15 Sep 2021 06:43:28 +0000

Hi all.

I'm on a Laravel project, and I have the following situation:

I have the route /transactions that show my home screen, and I have the route /transactions/list, which your duty is to populate the DataTable through a JSON, so far ok, what happens is that it DOESN'T matter what I do(do seriously have tried everything), I have no success! My main idea is to popularize the datatable with data coming from the database, but I can't even get dummy data from a data.json file..

So I'll first talk about the current state with a dummy file, because if I can't even use it, let alone pull files from the database...

Come on... If in the "url": "...", from Ajax I put the direct path to the data.json file, a datatables is populated, but when in the Controller, I try to return this file I don't with me, the most intriguing thing of all, is that this function is being heard, but there is no error return, and please don't ask me to see the site http://datatables.net/tn/1, as I said already, no error is returned, then I'll send the codes for the files, because I use the datatable a little myself and I don't know if something is missing or if I have any wrong information....

web.php -Route file:

 Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');


Route::resource('transactions', TransactionsController::class)->only('index', 'show')->middleware(['auth', 'verified']);
Route::get('transactions/list', [TransactionsController::class, 'list'])->middleware(['auth', 'verified'])->name('transactions.list');


require __DIR__.'/auth.php';

app.blade.php file - Where the datatable is used:




    
    
    

    {{ config('app.name', 'Laravel') }}

    

    
    

    
    
    
    
    

    
    
    

    
    @routes
    

    


    @inertia

TransactionsController file, which uses the list function:

withViewData(['teste' => 'Teste']);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }

    /**
     * Return the TransactionList to DataTables
     *
     *  @param  int  $id
     *  @return \Illuminate\Http\Response
     */
    public function list()
    {

        $json = file_get_contents("http://localhost/valid-repos/renavam-serpro/resources/views/data.json");

        return $json;

            
    }
}

data.json - JSON valid!!

{
  "data": [
    {
      "id": "1",
      "Tipo": "233 - Envio",
      "Sequencial": "084774",
      "Placa": "PDC-0A00",
      "Status": "Sucesso",
      "Retorno": "5421",
      "Data": "2011/04/25 14:00:00"
    },
    {
      "id": "2",
      "Tipo": "233 - Envio",
      "Sequencial": "084774",
      "Placa": "PDC-0A00",
      "Status": "Sucesso",
      "Retorno": "8422",
      "Data": "2011/07/25 14:00:00"
    }
  ]
}

PRINTS:::::::

Override loadingRecords with internationalisation

edika — Thu, 16 Sep 2021 10:26:50 +0000

I'mm trying to customize ther loadingRecords option using also the json file for internationlisation but it's not owrking.
On my initialisation I set this code

        "language": {
            url: "assets/plugins/custom/datatables/i18n/" + uilang + ".json",
            "loadingRecords": "Loading data....",
        },

but loadingRecords is overridden by the content oif the json file.
There is a way to use the json transalation and customize a loaginRecords option?

DT not scrollable when using 'language' parameter (internationalization plug-in)

Learco — Wed, 01 Sep 2021 09:19:31 +0000

Hi everyone,

So on my site I have an 'array button' that displays a scrollable datatable on click (which also has pagination).
It worked perfecly fine until I recently tried to implement translations with the internationalisation plug-ins.

Problem is, if I use 'language' with 'url' parameter at the DT initialisation, the datatable is not scrollable anymore.
Does someone have any idea why ?

Here is the code :

var table = $('#' + dataTable_id).DataTable({
            initComplete: function () {
                $('.dataTables_scrollHead > .dataTables_scrollHeadInner > table > thead > tr > th > div').each(function(){
                    if(this.className.includes('searchableInput')){
                        addPopover(this, 'input');
                    }
                    else if(this.className.includes('searchableRadioGroup')){
                        addPopover(this, 'radiogroup');
                    }
                })          

            },
            "columnDefs": [
                { "orderable": false, "targets": 0 }
            ],
            "order": [[4, 'desc']],
            "pageLength": 25,
            "scrollY": getArrayBodySize(),
            "scrollCollapse": true,
            "dom": 'lrtip',
            "paging": true,
            "autoWidth" : true,
            "columnDefs": [
                { "width": "13%", "targets": 1 },
                { "width" : "12%", "targets":7},
                {"width" : "10%", "targets": 10}
            ],
            "language": {
                //"url" : "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
                "url": getDtLanguage()
            }
        })

I tried using a CDN but it still doesn't work.

My function 'getDtLanguage()' function just returns the path to the json file in current session language (I copy pasted needed files from the plug-in page).
I know the path is correct because I can see the translated labels in the datatable.

If I directly define values (like here : https://datatables.net/examples/basic_init/language ) I can scroll, but I need to dynamically load translation files.

Also last thing : the DT is displayed in a modal on the page.

Hope someone can help !

How to properly use processing() plugin to notify export button activity

Duds — Sat, 28 Aug 2021 07:38:32 +0000

I have an export html (excelHtml5) and I want to show the processing message when the user presses the button:

{
                    extend: 'excelHtml5',
                    title: '',
                    text: 'Exportar (xlsx)'+' ',
                    filename: 'Empresas_'+'',
                    exportOptions: {
                        columns: [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
                        // modifier: {
                        //     search: 'current',
                        //     page: 'all',   // Not works when serverSide is enabled bc it's a client-side feature.
                        // },
                    },
                    // Adding custom behaviour calling default function
                    // https://datatables.net/forums/discussion/56199/how-can-i-use-a-custom-action-in-a-extended-button
                    action: function( e, dt, node, config) {
                        dt.processing(true);
                        // dt.fnProcessingIndicator();
                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);
                        // dt.fnProcessingIndicator(false);
                        dt.processing(false);
                    },
                },

But the Datatable notifier isn't showing up even when exporting a lot of rows.

If I comment dt.processing(false); the Datatable notifier will show when the exporting process had already been finished (and stays forever).

What should I do to show the notifier when the user initiates the export process and hide it when the export finishes?

Datatable Editor Quill - can't combine header and list style

Capamania — Mon, 23 Aug 2021 18:12:30 +0000

I'm using datatable editor and its quill plugin https://editor.datatables.net/plug-ins/field-type/editor.quill .

For some reason I cannot combine a header style with a bullet list. I can select a different header 2, 3 or 4 ... but if I select a list, it jumps back to the default "" header and vice versa.

How can I fix this? In the example it works: https://quilljs.com/docs/formats/

That's my editor init:

// Editor Newsroom
editor_newsroom = new $.fn.dataTable.Editor( {
    // ...
    fields: [{
        label: "Bodytext:",
        name: "news.bodytext",
        className: 'block full',
        type: "quill",
        toolbarHtml:
            ''+
                ''+
                    ''+
                ''+
                ''+
                    ''+
                    ''+
                ''+
            ''
        }
    ]
});

I want to integrate the translator plug in and export to excel

mera — Fri, 20 Aug 2021 12:41:33 +0000

$(document).ready(function() {
var table = $('#tabla1').DataTable({
    lengthChange: false,
    buttons: [ 'copy', 'excel', 'pdf', 'colvis' ],
    "columnDefs": [
        { "orderable": false, "targets": 7 },
        { "orderable": false, "targets": 8 },
        { "orderable": false, "targets": 9 },
        { "orderable": false, "targets": 10 },
        ],

    "pageLength":100,
});
table.buttons().container()
    .appendTo( '#tabla1_wrapper .col-md-6:eq(0)' );
});

I want to integrate the translator plug in

$(document).ready(function() {
    $('#tabla1').DataTable({
   "language": {"url": '/datatable/Spanish.json'},
});

the 2 work separately but I can't add "language": {"url": '/datatable/Spanish.json'}, to the first example

Plugin any-number

ostmal — Fri, 30 Jul 2021 09:08:23 +0000

In my project, I use the "any-number" plugin:
https://datatables.net/plug-ins/sorting/any-number
It works great!
But, I noticed that with a table that works on the principle of data processing "server-side" - the plugin does not work. Is this normal? I didn't find anything in the plugin description text.

How to Select All up to max limit using Gyrocode checkboxes plugin

TrevorWat — Fri, 23 Jul 2021 07:02:10 +0000

Hello!

I am using the Gyrocode checkboxes plugin, and I've run into a situation where I am trying to have a maximum number of selected rows and the select All checkbox does not trigger the function I put in place.
I'm using a server-side data source.

Here is what I added (trying to include just the relevant part, let me know if I should include more):

        table.on('select', function (e, dt, type, ix) {
            var selected = dt.column(0).checkboxes.selected();
            if (selected.count() > 5) {
                dt.rows(ix).deselect();
                alert("A maximum of 50 records can be added to a single document.");
            }
        });

The above works great when manually checking the boxes (it prevents the user from selecting more than 5). When checking the Select All box, though, it selects all of the items on the page (10), so obviously it's not triggering the above function.

I'm sure this is just a matter of adding something similar to that .on() method, but I'm not sure what. I checked [here] but I don't have an intuition for how to use these options.

Thank you!

(https://www.gyrocode.com/projects/jquery-datatables-checkboxes/reference/options/#columns.checkboxes.selectAllCallback "here ")

how to setup accent-neutralization plugin from cdn?

Leo Bruno — Sun, 25 Jul 2021 13:11:49 +0000

I have this datatables:

setupPlugin() {
    this.$el = $(this.el);    
    this.$el.DataTable({               
        "dom": '<"d-flex justify-content-between"fi<"pull-right"l>>t<"d-flex justify-content-between"p<"pull-right"Br>>', 
        "buttons": ["copy", "excel", "pdf", "print", "colvis"],            
        "language": languageStrings,
        "responsive": true,
        "order": [[ 1, "asc" ]],
        "columnDefs": this.getRowButtonsDefs()                        
    }); 
}

how do I set up the accent-neutralization plugin from cdn in this scenario?

Increment/Decrement tool using Bootstrap and Fontawesome - Updated

ideaxme — Fri, 16 Jul 2021 05:21:46 +0000

Updated version of Greg Brainerd's increment/decrement number input plugin: https://datatables.net/forums/discussion/40706

// incrementor field type plug-in code
(function ($, DataTable) {

    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }

    var Editor = DataTable.Editor;
    var _fieldTypes = DataTable.ext.editorFields;

    _fieldTypes.incrementor = {
        create: function ( conf ) {
            var that = this;

            conf._enabled = true;

            conf._input = $(
            '' +

            '' +

            '' +

            '' +

            ''
            );

            // Use the fact that we are called in the scope of the Editor instance to call
            // the API method for setting the value when needed
            $('button.alter', conf._input).click( function () {

                if ( conf._enabled ) {
                    var number = $("input.incrementor", conf._input).val();

                    if ($(this).hasClass('increment')) {
                    number = parseInt(number) + 1;
                    $("input.incrementor", conf._input).val(number);
                    }
                    else if (number >= 1) {
                        number = parseInt(number) - 1;
                        $("input.incrementor", conf._input).val(number);
                    }
                    that.set( conf.name, $("input.incrementor", conf._input).val() );
                }

                return false;
            } );

            return conf._input;
        },

        get: function ( conf ) {
            return $("input.incrementor", conf._input).val();
        },

        set: function ( conf, val ) {
            var number = parseInt(val);

            $("input.incrementor", conf._input).val(number);
        },

        enable: function ( conf ) {
            conf._enabled = true;
            $(conf._input).removeClass( 'disabled' );
        },

        disable: function ( conf ) {
            conf._enabled = false;
            $(conf._input).addClass( 'disabled' );
        }
    };

    })(jQuery, jQuery.fn.dataTable);

Rowgroup plugin question

darrenmarkash — Thu, 24 Jun 2021 12:23:49 +0000

I have used the example code found at http://live.datatables.net/cecosoru/1/edit on my page and it works well.

I have a "pageNo" as field 0 (not shown) and a "projectTitle" as field 1 and have set the dataSrc to 0 which results in groups as shown in the attachment.

What I need is to be able to add the "Project Title" on the group line with the project number, row count, etc and optionally remove it from the row.

Can someone help with this?

Darren

$.fn.datatable.ext.search.push apply on specific table

Matanmkl — Thu, 01 Jul 2021 11:40:21 +0000

Hi,
I came across this thread while searching for this feature myself, has it been implemented since May 2016?

It will be of great help to me

Thanks anyway.

New RowsGroup plugin: merge cells vertically (rowspan)

ashl1 — Sat, 08 Aug 2015 06:39:29 +0000

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
    ],
    });

Strange bug between the JSON language files and unbind event

andreszs — Sat, 12 Jun 2021 14:52:36 +0000

I've added the following code to replace the auto-submit behaviour of the search input and replace it with search only after pressing Enter, which works great:

$('#dataTable_filter input').unbind();
$('#dataTable_filter input').bind('keyup', function (e) {
    if (e.keyCode == 13) {
        oTable.search(this.value).draw();
    }
});

However, whenever I add a JSON language file to translate DataTables, the above code is suddenly ignored and the search input returns to the default mode of auto-submit itself on keypress. This is a problem because I really need to translate DataTables AND prevent the auto search feature due to database performance issues.

The full code is this:

var oTable = $('#dataTable').DataTable({
    processing: true,
    responsive: true,
    serverSide: true,
    stateSave: false,
    pageLength: 25,
    order: [0, 'desc'],
    columnDefs: [
        {searchable: false, targets: [6, 7, 9, 10]}
    ],
    language: {
        url: '../sbadmin/vendor/datatables-plugins/es_es.json'
    },
    ajax: {
        url: 'get.php',
        type: 'GET',
        error: function (xhr, error, code) {
            console.warn(xhr);
            alert(xhr.responseJSON.message);
        }
    }
});
/* Evitar autobúsqueda al tipear en search */
$('#dataTable_filter input').unbind();
$('#dataTable_filter input').bind('keyup', function (e) {
    if (e.keyCode == 13) {
        oTable.search(this.value).draw();
    }
});

I'm not sure how the addition of a language file relates to some unbind() event, any ideas will be welcome. Thanks.

Row details does not appear

sudogo — Mon, 07 Jun 2021 00:58:25 +0000

Hello

I try to apply the demo from this link https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer.html

But the row details does not appear and here is a test

https://codepen.io/go-sudo/pen/Popaogz

Regards

Pagination Input - Bootsrap 4

godin — Fri, 04 Jun 2021 17:26:02 +0000

I would like to use the **input **PaginationType, however when I do so I lose all styling from Bootsrap. The buttons still work (shown in French) when I click on them, but I lose all styling. I found an old solution from 2015 but I can't seem to make it work on 1.10.

Is there maybe a way to just add the input field and use full-numbers too?

Select2 fields resetting to first option on nested datatable/editor update/delete

rwearmouth — Mon, 17 May 2021 16:33:41 +0000

I'm having an issue with my Select2 dropdown fields where they reset to the first value in the list (however it may be sorted, usually alphabetically in my cases) whenever a nested datatable row is updated or deleted. The problem does NOT occur when adding a new entry to the nested tables, nor does it occur when the field type is a standard select field. Am I doing something wrong? Or is there some Select2 event I can interrupt on edit/delete?

I do have this set up in a live environment we're using for a sort of beta test, so I can set you up with a login to try it out if you'd like.

//nested editor
var issueEditor = new $.fn.dataTable.Editor( {
                    ajax: './php/issues_nested.php',
                    template: '#issueForm',
                    fields: [ {
                            label: 'Issue',
                            name: 'mtrf_requests.issue',
                            className: 'block'
                        }, {
                            label: 'Reported By',
                            name: 'mtrf_requests.reported_by',
                            className: 'block'
                        }, {
                            label: 'Work Performed',
                            name: 'mtrf_requests.work_performed',
                            type: 'textarea',
                            className: 'block'
                        }, {
                            label: 'Complete',
                            name: 'mtrf_requests.complete',
                            type: 'checkbox',
                            className: 'block',
                            options: [
                                { label: '', value: 1 }
                            ],
                            separator: '',
                            unselectedValue: 0
                        }
                    ]
                } );

//main editor
editor = new $.fn.dataTable.Editor( {
                    ajax: './php/inbox_table.php',
                    table: "#inbox",
                    template: "#customForm",
                    fields: [ {
                        //this field acts normally
                        label: "Client ID",
                        name: "mtrf_work_orders.client_id",
                        // type: "select2",
                        // opts: {
                        //     placeholder: "Client...",
                        //     allowClear: true
                        // },
                        type: 'select',
                        className: 'block'
                    }, {
                        //this field gets reset any time 'dummy_issues' is edited or deleted. Untouched when a new entry is added.
                        label: "Unit Type",
                        name: "mtrf_work_orders.unit_type",
                        type: "select2",
                        id: 'unitType',
                        opts: {
                            placeholder: "Unit Type...",
                            allowClear: true
                        },
                        className: 'block'
                    }, {
                        label: 'Issues',
                        name: 'dummy_issues',
                        type: 'datatable',
                        editor: issueEditor,
                        config: {
                            ajax: {
                                url: './php/issues_nested.php',
                                type: 'POST',
                                //send post variable of form ID to DB query script
                                data: function (d) {
                                    d.form_id = form_id;
                                }
                            },
                            buttons: [
                                { extend: 'create', editor: issueEditor },
                                { extend: 'edit',   editor: issueEditor },
                                3) { echo "{ extend: 'remove', editor: issueEditor }, "; } ?>
                                {
                                    extend: 'refresh',
                                    editor: issueEditor,
                                    attr: {
                                        id: 'issuesRefresh'
                                    }
                                }
                            ],
                            columns: [
                                {
                                    title: 'Issue',
                                    data: 'mtrf_requests.issue'
                                },
                                {
                                    title: 'Work Performed',
                                    data: 'mtrf_requests.work_performed'
                                },
                                {
                                    title: 'Status',
                                    data: 'mtrf_requests.complete',
                                    render: function(data, type, row) {
                                        return (data == 1) ?  "Complete" : "";
                                    }
                                }
                            ]
                        }
                    }

Editor autoComplete field cannot be disabled

wblakenc — Mon, 03 May 2021 18:50:44 +0000

Link to test case: http://live.datatables.net/mudejitu/1/edit
Debugger code (debug.datatables.net): N/A
Error messages shown: N/A
Description of problem:

When an editor field is set to the autoComplete type, you cannot disable it. Well, technically, it is disabled (as the autocomplete no longer works) but the field is editable. Check out test case above.

Thanks!