Is there any way to print the title and messageTop on each print sheet?

```{
extend: 'print',
title: (options.reporte).toUpperCase(),
messageTop: \n Fecha de creacion: ${new Date().getDate().toString()}/${(new Date().getMonth() + 1).toString()}/${new Date().getFullYear().toString()} \n Hora: ${new Date().getHours().toString()}:${new Date().getMinutes().toString()}:${new Date().getSeconds().toString()} \n Usuario: ${JSON.parse(localStorage.getItem("currentUser")).nombreUsuario} ${JSON.parse(localStorage.getItem("currentUser")).apellidoUsuario},
text: '<i class="fa fa-print"></i> Imprimir',
titleAttr: 'Imprimir',
exportOptions: {
columns: function (idx, data, node) {
if ($(node).hasClass('noVis')) {
return false;
}
let tableID = $(node).closest('table').attr('id');
return tableID === undefined ? false : $(tableID).DataTable().column(idx).visible();
}
},
customize: function (win) {

                        $(win.document.body).css('font-size', '10px');
                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit')
                        $(win.document.body).find('thead').css({
                            "color": "black",
                            "font-size": "10px",
                            "font-weight": "bold",
                            "text-align": "center"
                        })
          }

}```

Got this error when I added the property scrollY.

Could someone help me with this. Used 1.10.18 version

Uncaught TypeError: s.match is not a function
at _fnStringToCss (jquery.dataTables.js:5839)
at i.fn.init._fnScrollDraw (jquery.dataTables.js:5441)
at jquery.dataTables.js:6636
at Function.map (BundledJQuery.min.js:2)
at _fnCallbackFire (jquery.dataTables.js:6635)
at _fnDraw (jquery.dataTables.js:3507)
at _fnReDraw (jquery.dataTables.js:3550)
at _fnInitialise (jquery.dataTables.js:4732)
at loadedInit (jquery.dataTables.js:1294)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1306)

1 Search Bar and 1 Table on 1 Page, That Can Not Only Show Results from the table on the page you're currently on, but from a table on a different page, or different pages?

So I would like to use Dependent() to create a cascaded list in editor. I have two tables to query. The tables are Divisions and Area Offices. When you choose a division the area offices should populate the select field for area offices. The divisions and area offices have a location code. For example...

Division1
Location Code 100

Area Office1 - Location Code 110
Area Office1 - Location Code 120
Area Office1 - Location Code 130

Division2
Location Code 200

Area Office1 - Location Code 205
Area Office1 - Location Code 220
Area Office1 - Location Code 230

etc.

Can I have dependent query two different tables and if so what would that look like? Also how would I query in editor a value between 100 and 199 or 200 and 299 to get the area offices for that division?

Hi,
I ma using basic example using data tables (referring from https://datatables.net/examples/basic_init/zero_configuration.html)

But i noticed that over Safari Browser it is not working...Even the above url also does not working over safari..

I attached code as well and screenshot of page how it is appear over Safari browser.

Can anyone help please.

Thanks

Hi,
I have two tables: “tb_detalles” y “tb_palabras”, united by a third table, “detalles_palabras”. This last table contains two fields: “detalles_id” y “palabras_id”, which are the main key and which are related to the id of each of the respective “tb_detalles” y “tb_palabras”.
With the Datatable editor I can fill a column with multiple words for each record:

detalles_palabras (table)
detalles_id        palabras_id (fields)
12               2
12               7
12               15
17               2

The summary code that I am using is the following:

$.fn.dataTable.Editor( {
    fields: [ 
    {
        label: "Pal. Clave:",
        name: "tb_palabra[].id",
        type: "select2",
        opts: {
            "placeholder": "Select State",
            "multiple": "multiple",
            "allowClear": true
            } 
        },  
    ]
} );

$('#imagen_tbl').DataTable( {
    columns: [
        { data: "tb_palabra", render: "[, ].palabra" }, 
    ]
} );

Data:

Editor::inst( $db, 'tb_detalle' )

    ->join(
        Mjoin::inst( 'tb_palabra' )
        ->link( 'tb_detalle.id', 'palabra_detalle.detalle_id' )
        ->link( 'tb_palabra.id', 'palabra_detalle.palabra_id' )
        ->order( 'palabra asc' )
        ->fields(
            Field::inst( 'id' )
            ->validator( Validate::required() )
            ->options( Options::inst()
                ->table( 'tb_palabra' )
                ->value( 'id' )
                ->label( 'palabra' )
            ),
            Field::inst( 'palabra' )
        )
        ->where( 'palabra_detalle.modo_id', 1 )
    )
)

I want to add a new functionality and I need, that the table: “detalles_palabras” differentiate the data from other tables. For that I added a new field: “modo_id”

(Before)
detalles_palabras (table)
detalles_id      palabras_id (fields)
12              2
12              7
12              15
17               2

(Now)
detalles_palabras (table)
detalles_id     palabras_id     modo_id (fields)
12               2                   1
12               7                   1
12              15                   1
17              2                    1
Data from a second Datatable
12              7                    2
12              15                   2
23              7                    2
Data from a third Datatable
12              15                   3
23              7                    3
23              5                    3

The question is: How can I do that when I add a word from each of the datatables, I automatically insert the data in the field mode_id, with the information of the corresponding table. With the example code, it would be a 1.

Thank you very much and happy year to all.

I'm running into the need to drag an drop between tables but didn't find working examples on the forum. At some point in the past I found an example of drag and drop between regular tables. Thought it would be useful so kept the link to the fiddle. I adapted the code to work with Datatable's APIs. In this example you can drag and drop between tables using the Name column.

https://jsbin.com/pogufut/edit?html,js,output

Ultimately I would like to combine this with RowReorder to allow for pairing rows between two tables and moving the rows between the two tables. Guess I have more work ahead of me If I get this working I'll post an update.

Let me know if there are suggestions for improvements.

Kevin

I have made the code the display the data into the data-table with the help of HTTP GET Service.

Like sPaginationType: "full" OR sPaginationType: "simple"

i need a parameter which suits my needs. Please do share mu idea regarding this issue

I need to make custom pagination showing only 4 buttons previous, 1, 2, next page.

Note: When user is on page 1 of pagination it should show previous, 1, 2, next page and if the user is on page 2 it should show previous, 2, 3, next page and simultaneously like that if any number of data available. If the data is less than 10 only it should display previous, 1, next page and if it exceeds more than 10 it has to follow the above said steps.

Image Reference:

I have a backend database with a clients table and an events table. From the events table view, there will be an create/edit event form with select field to select an existing client. But if a new client is detected somehow ('new' button next to client select? simply type new client name in select window?), I'd like a client form to be launched over top of the events form to collect the client information and perform the ajax create client.

Is there any pattern I can look at that does something like this?

I put together this example of using the HTML5 drag and drop API to move rows between two Datatables. Its an interesting API and doesn't require additional JS libraries for drag and drop. It was a good learning experience to build this example. Hope it helps others how want to drag and drop between tables.

https://jsbin.com/venigaj/1/edit?html,css,js,output

Kevin

Hi guys

Hope you are all well.

Hope you can help me with this again. Can i have 2 tables then from 1 table to another table drag and drop multiple selected records. Please help. thanks so much for always helping me.
Hope you all enjoy your christmas. be happy always.

I am trying to use an index column that automatically shows row counter based on sort.

I am using this example: https://datatables.net/examples/api/counter_columns.html

But I can't figure out how to get it to work when using "columns" as well.

This is what my code looks like: https://hastebin.com/egegisuraq.js

I believe the issue is related to the fact I specified my columns with "columns" but I don't know how to specify a placeholder for this rendered column that represents the row ID based on current sort. I tried using "null" but that did not work.

Hello everyone,
for three days now I am unable to get this to work for me, for some reason the I am unable to get the sum of a column over all pages it just does not work

here is my code
{%extends 'base.html'%}

        <!DOCTYPE html>
        <html lang="en">
        <head>    {%block head%}

            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Sales</title>  
            <script   src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
            {%endblock%}

        </head>
        <body>
            {%block body%}
              <div class="container">
                <h3>Sales Report</h3>

            <div class="row">
              <div class="col-sm-12">
                <table id="table" class="table table-striped table-bordered" style="width:100%" data-server-side="true" data-ajax="/api/salesVS/?format=datatables">
                  <thead>
                    <tr>
                      <th data-data="product_type">Product Type</th>
                      <th data-data="quant">Quantity</th>
                      <th data-data="saleprice">Sale Price</th>
                      <th data-data="unitprofit">Unit Profit</th>
                      <th data-data="profitpercent">Unit Profit %</th>
                      <th data-data="totalprofit">Total Profit</th>
                      <th data-data="date">Date</th>
                    </tr>
                  </thead>
               <tfoot>
                    <tr>
                        <th style="text-align:Left">Total</th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </tfoot>
                </table>

              </div>
            </div>
          </div>
          {%load static%}
          <script src="{% static "js/jquery-3.3.1.js" %}"></script>
          {%load static%}
          <script src="{% static "js/jquery.dataTables.min.js" %}"></script>
          {%load static%}
          <script src="{% static "js/dataTables.bootstrap4.min.js" %}"></script>
          <script>
              $(document).ready(function() {
                      $('#table').DataTable( {
                "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;
                    };
                    var coltosum=[1,5]
                    for (c in coltosum){
                    // Total over all pages
                    console.log(api.column( coltosum[c] ).data())
                    total = api.column( coltosum[c] ).data().reduce( function (a, b) {return intVal(a) + intVal(b);}, 0 );
                    // Total over this page
                    pageTotal = api.column( coltosum[c], { page: 'current'} ).data().reduce( function (a, b) {return intVal(a) + intVal(b);}, 0 );
                    // Update footer
                    $( api.column( coltosum[c] ).footer() ).html(pageTotal+'('+total+')');}
                }
            } );});

          </script>

            {%endblock%}
        </body>
        </html>

an image of the page and the result in the console

thanks in advance

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

I have three buttons and depending on which one is clicked a different editor form is presented. The three buttons are a Database Schedule, a Database backup which occurs immediately and a Database Restore from backup. Do I need to create three different editor instances? What would that look like?

hi i want to reduce number of columns of table from 5 column to 3 column...but when i delete two columns an erorr happens to me and says

localhost says : DataTables warning: table id=data-table - Requested unknown parameter '3' for row 1. For more information about this error, please see http://datatables.net/tn/4

do you know how can i fix this error?

Everything else seems to be working (sorting, pagination, etc). I added the responsiveness today but it acts like nothing happened. When I drag in my browser edge the tables just blows out of the containing div... As a test I tried loading one of the demos up in codepen and it worked. So I copy/pasted the same demo into my app, including their cdn links, but whenever I try and get it to work in my app nothing happens (I'm building something in Laravel with BS4). I've checked and checked again. I'm at a total loss. I've been toying with it for hours... hoping someone can help get me through this. Here's the code I'm working with if it helps...

MY TABLE

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header" style="display: flex; align-items: center; justify-content: space-between;">
                <h5><i class="fas fa-users fa-fw"></i> Families</h5>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addFamily">
                    <i class="fas fa-plus"></i> Add Family
                </button>
            </div>
            <div class="card-body">

                    <table class="table table-bordered table-hover mb-0 dt" width="100%">
                        <thead>
                            <tr>
                                <th>Parent 1 First Name</th>
                                <th>Parent 1 Last Name</th>
                                <th>Parent 2 First Name</th>
                                <th>Parent 2 Last Name</th>
                                <th class="actions no-sort">Actions</th>
                            </tr>
                        </thead>
                
                        <tbody>
                            @foreach ($families as $family)

                                <tr>
                                    <td>{{ $family->parent1_first_name }}</td>
                                    <td>{{ $family->parent1_last_name }}</td>
                                    <td>{{ $family->parent2_first_name }}</td>
                                    <td>{{ $family->parent2_last_name }}</td>
                                    <td class="actions">
                                        <i class="fas fa-eye fa-fw" data-toggle="modal" data-target="#showFamily" 
                                            data-id="{{ $family->id }}"
                                            data-parent1_first_name="{{ $family->parent1_first_name }}"
                                            data-parent1_last_name="{{ $family->parent1_last_name }}"
                                            data-parent2_first_name="{{ $family->parent2_first_name }}"
                                            data-parent2_last_name="{{ $family->parent2_last_name }}"
                                            data-phone="{{ $family->phone }}"
                                            data-email="{{ $family->email }}"
                                            data-address="{{ $family->address }}"
                                            data-city="{{ $family->city }}"
                                            data-state="{{ $family->state }}"
                                            data-zip="{{ $family->zip }}"
                                            data-notes="{{ $family->notes }}" 
                                            @if ($family->students->count())
                                                data-students="{{ $family->students->sortBy('first_name') }}"
                                            @endif
                                            ></i>

                                        <i class="fas fa-pen fa-fw" data-toggle="modal" data-target="#editTechnique" 
                                            data-id="{{ $family->id }}"    
                                            data-parent1_first_name="{{ $family->parent1_first_name }}"
                                            data-parent1_last_name="{{ $family->parent1_last_name }}"
                                            data-parent2_first_name="{{ $family->parent2_first_name }}"
                                            data-parent2_last_name="{{ $family->parent2_last_name }}"
                                            data-phone="{{ $family->phone }}"
                                            data-email="{{ $family->email }}"
                                            data-address="{{ $family->address }}"
                                            data-city="{{ $family->city }}"
                                            data-state="{{ $family->state }}"
                                            data-zip="{{ $family->zip }}"
                                            data-notes="{{ $family->notes }}"></i>

                                        <i class="fas fa-trash fa-fw" data-toggle="modal" data-target="#deleteTechnique" 
                                            data-id="{{ $family->id }}"></i>
                                    </td>
                                </tr>

                            @endforeach
                            
                        </tbody>
                    </table>

            </div>
        </div>
    </div>
</div>

DATATABLE JS

// DataTables
$('.dt').DataTable({
    responsive: true,
    autoWidth: false,
    columnDefs: [{
        targets: 'no-sort',
        orderable: false
    }]
});

JS REQUIREMENTS

require('bootstrap');
require('@coreui/coreui');
require( 'datatables.net-bs4' )();
require( 'datatables.net-responsive-bs4' )();

SCSS INCLUDES

// DataTables
@import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css';
@import '~datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css';

PACKAGE.JSON DEPENDENCIES

"dependencies": {
        "@coreui/coreui": "^2.1.4",
        "datatables.net": "^1.10.19",
        "datatables.net-bs4": "^1.10.19",
        "datatables.net-responsive-bs4": "^2.2.3",
        "perfect-scrollbar": "^1.4.0",
        "simple-line-icons": "^2.4.1"
    }

Let me know if I missed anything that might help get this working. Thanks!

Hi Allan,

Thanks for your great Datatables product. We are using it thru a web app template (AdminLTE).

Our use case is: we are building a web admin to our medical device product. Administrators and care providers will log in to our system to administer care for their patients on our medical device (physical therapy machine). We want to enable them to access the system from tablets and mobile phones as well so we are enabling mobile responsive versions of the admin interface. It is when they access via Chrome on Android that I am seeing odd behavior. Specifically, if the device is rotated (portrait -> landscape or vice versa) that the table does not get updated correctly. The specific device I am using is a Samsung Galaxy Tab E.

I am using the Scroller and Responsive extensions. I used a data sample file from your site with 1000 entries to simulate a loaded table.

Issues:

1: the table header row column widths get out of sync with the data rows (they become different widths).

Steps:
Start with tablet in landscape
Reload the page.
Scroll the table so that the top row is ID #24.
Rotate the device to portrait.
Observe that the column widths are now out of sync.
Scroll the table down.
At some point, the table gets updated, and now columns are in sync again.

2: the table does not paint correctly after the tablet rotates when the top row is greater than 1. By paint correctly, I mean that the table does not fill the page. To restore painting, you must scroll the table, and it will eventually repaint fully.

Steps:
Starting with tablet in landscape
Reload the page
Scroll the table so that the top row is ID #15.
Rotate the device to portrait.
Observe that the bottom row is ID#27, yet there is room for several more rows.
Scroll the table down.
Eventually, the table repaints and fills the page with rows of data.

Regarding the screen size changing on rotate, I tried using your resizer plugin and was unsuccessful getting it to work in my design (would resize when page got longer but not when page got shorter). I found something on your blog or forum that did work better for my design (bootstrap-based). Although not ideal, it seems to handle the page size changing on device rotates better.

I attached the HTML sample and data file along with 2 screen captures - #1 is correct view and #2 demonstrates both problems.

I have 3 columns of data.

John 92 A+
Johnny 90 A+
Big John 89 A
John JR 65 C-
Little John 60 C-

The 2nd column must be hidden, and the 3rd column is sorted by the 2nd column, but I can't seem to find a way to make the sort desc only.

I'm looking for something like: { 'iDataSort': 1, [desc] }

I saw a plugin, but this approach seems like overkill given I have a numerical column by which the sort is happening. Also, a custom sort by the 3rd column doesn't work because the score covers a wide range of numbers.

Is there an easy way to do this that I've missed?

Both software as in the DataTables and the Editor. Is it possible to give a button the behavior of appearing if a query returns a result, and not have it appear when there are no results?