Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 79328 articles
Browse latest View live

What files are needed for the server side processing web pade to work?

0
0

Hello,

I have created the index.html, config.php, table.details.js, staff.php, and test.details.php. The table.details.php does provide the entire records from the details table when opened in the web browser but the html form is not filled with this info. What am I doing incorrectly?
Thank you for your help..

John
:

Sort value for column different from displayed value

0
0

This may be a very common problem, but I did not find any relevant (and easy) solution so far:
I need to sort the rows of a table by a different value that the respective column shows.
Example:
* Value to be displayed: 11,85 m
* Value to be sorted by: 1185

If the sorting happens by the alphynumerical displayvalue, the sorting is wrong is it's interpreted as a string. So it should be sorted by the pure numeric integervalue in cm (which is available in my data).
In footable, there was an option to set an attribute "data-sort-value" which wouldl be used instead. Is there any similar (and simple, meaning no JS coding again) way to do this in DataTables?

Export csv files split into batches by max rows

0
0

Looking for a good approach to do the csv export, but split the full dataset into multiple files based on the number of rows, I.e. every 50 rows a new file is generated.

How can I add class to the row on table load?

0
0

I have table #dt-transaction
I want to highlight row of 'new' transactions

var dt_transaction = $('#dt-transaction').DataTable({
        "processing": true,
        "ajax": {

            "url": "/cabinet/get/1",
            "type": "POST",
            "dataSrc": function (json) {
                // console.log(json)
                return json;
            }
        },
        columns: [{
            "data": "date_pub"
        },
        {
            'data': 'client'
        },
        {
            'data': 'sum'
        }
        ],
        "language": lang[0]
    });

// get data['new'] from row on table body load
$('#dt-transaction tbody').load('tr', function () {
        var data = dt_transaction.row(this).data();
        console.log(this) //here console shows that row is undefined
        if (data['new'] == 1) {
            $(this).addClass('table-success')
        }
    });

How can I change the Button names or Other thinks?

0
0

Hello, I want to change the Button namen and the dataTables info, but I dont know in which file.
Can anyone help me?

thanks in advance
Yazira

Bug in Criteria.numFmtConditions.>.search function of searchBuilder

0
0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Original code in dataTables.searchBuilder.js:

Criteria.numFmtConditions = {
    '>': {
        conditionName: 'Equals',
        init: Criteria.initSelect,
        inputValue: Criteria.inputValueSelect,
        isInputValid: Criteria.isInputValidSelect,
        search: function (value, comparison) {
            var val = value.replace(/[^0-9.]/g, '');
            var comp0 = comparison[0].replace(/[^0-9.]/g, '');
            return +val > +comp0;
        }
    }
}

The search function is not correct.

function search(value, comparison) {
    var val = value.replace(/[^0-9.]/g, '');
    var comp0 = comparison[0].replace(/[^0-9.]/g, '');
    return +val > +comp0;
}
result = search('-3%', ['2%']);
console.log(result);

The result is true, but should be false.
Suggest to use Numeral.js (http://numeraljs.com/) to compare.

function search(value, comparison) {
    var val = numeral(value).value();
    var comp0 = numeral(comparison[0]).value();
    return val > comp0;
}
result = search('-3%', ['2%']);
console.log(result);

The result is false.

Bug in Criteria.stringConditions.ends.search function of searchBuilder

0
0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Original code in dataTables.searchBuilder.js:

Criteria.stringConditions = {
    'ends': {
        conditionName: 'Ends With',
        init: Criteria.initInput,
        inputValue: Criteria.inputValueInput,
        isInputValid: Criteria.isInputValidInput,
        search: function (value, comparison) {
            return value.toLowerCase().indexOf(comparison[0].toLowerCase()) === value.length - comparison[0].length;
        }
}

The search function is not correct.

function search(value, comparison) {
    return (value.toLowerCase().indexOf(comparison[0].toLowerCase()) === value.length - comparison[0].length);
}
result = search('ab', ['abc']);
console.log(result);

The result is true, but should be false.
The function should be:

function search(value, comparison) {
    return (value.toLowerCase().indexOf(comparison[0].toLowerCase()) === value.length - comparison[0].length)
        && (value.length - comparison[0].length != -1);
}

Or:

function search(value, comparison) {
    return value.toLowerCase().endsWith(comparison[0].toLowerCase());
}

Server Side Search & SearchPanes with Customer Order -> JavaScript Fault

0
0

Hi,
I have issues with server side search together with custom ordered searchpanes. Took me a bit time search around for a free provider with SQL/PHP support and preparing the test files :)

Click here for good testcase without customordering -> No issues at all.
Click here for bad testcase with custom ordering -> JS fault (jquery, JS datatables, JS searchpanes) if you push an entry from search panes.

testdt_bad.html:103 Uncaught TypeError: Cannot read property 's' of undefined
at n._serverTotals (testdt_bad.html:103)
at HTMLTableElement.<anonymous> (testdt_bad.html:103)
at HTMLTableElement.dispatch (testdt_bad.html:36)
at HTMLTableElement.v.handle (testdt_bad.html:36)
at Object.trigger (testdt_bad.html:36)
at HTMLTableElement.<anonymous> (testdt_bad.html:36)
at Function.each (testdt_bad.html:36)
at S.fn.init.each (testdt_bad.html:36)
at S.fn.init.trigger (testdt_bad.html:36)
at Ot (testdt_bad.html:43)

It does not make any difference if you order by:
order: ['Column2', 'Column1']
or by
columns: [2,1]

Everything else is completely same. If you change order by this options -> error.
For the record, the SQL connector or the Libs does not have any special hacks.

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions,
    DataTables\Editor\SearchPaneOptions;



    Editor::inst( $db, 'testdt', 'id' )
    ->fields(
        Field::inst( 'id' ),
        Field::inst( 'CaseID' ),
        Field::inst( 'CaseNumberSFDC', 'Case No' ),
        Field::inst( 'CreateDate', 'Time Opening' ),
        Field::inst( 'CaseQualification', 'Qualification' )
            ->searchPaneOptions( SearchPaneOptions::inst()
        ),    
        Field::inst( 'Status' )
            ->searchPaneOptions( SearchPaneOptions::inst()
        ),    
        Field::inst( 'Priority' ),
        Field::inst( 'CaseOrigin', 'Origin' )
            ->searchPaneOptions( SearchPaneOptions::inst()
        ),      
        Field::inst( 'FailureType', 'Failure Type' )
            ->searchPaneOptions( SearchPaneOptions::inst()
        ),    
        Field::inst( 'CaseSubject', 'Subject' ),
        Field::inst( 'CaseSubject_trans' ),
        Field::inst( 'CaseDescription', 'Description' ),
        Field::inst( 'CaseDescription_trans'),
        Field::inst( 'Region', 'Region' )
            ->searchPaneOptions( SearchPaneOptions::inst()
        )
    )

->debug(true)
//->write( false )
->process($_POST)
->json();

Made everything default. The Datatables/Searchpanes are pretty current (nightly from last week).


searchBuilder value input is not compatible with Chinese IME

0
0

Link to test case:
https://datatables.net/extensions/searchbuilder/examples/initialisation/simple.html
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
1. Open this page Basic SearchBuilder Example
2. Add condition 'Name Contains', focus the condition value input, use An Chinese IME to type '中'.
3. There are unexcepted space characteres before '中'. When I switched to another Chinese IME, there are other unexcepted characteres.

4. The global search is compatible with Chinese IME.

Large number of tables - initialization problems

0
0

Link to test case:
Hi,

I'm using DataTables successfully in my projects. The problem I'm having starts when there are a lot of tables that need to be loaded and users start interacting with them before everything is loaded.

Here's a small version that shows a concept where the user adds tabs with multiple tables

Here's one with more data in it and if you load it and start switching tabs right away you will get errors from data tables about initialization.

This problem is even more visible on huge datasets or with lots of tables (it's not uncommon for me to have hundreds of tables smaller/bigger ones) and file sizes of 50MB (I use them locally).

Examples use HTML-based storing of data but the same thing happens if it's JavaScript-based (faster but still the problem exists).

Since DataTables have problems in general when they are stored on different tabs that responsiveness of DataTable is not working I am explicitly resizing all tables on a given tab when the user switches to a new tab which fixes some things but at the same time since it triggers on every tab change user has to wait for it to load, as if they click too fast they get an error about initialization.

try {
    // Initially it was useed with ID, but if people use their own naming no tables were found
    //var table = document.getElementById(tab.id + "-Content").querySelectorAll('table[id^="DT-"]');
    var table = document.getElementById(tab.id + "-Content").querySelectorAll('table');
    table.forEach(resizeTable)
} catch (e) {
    console.log('No datatables available.');
}
function resizeTable(table) {
    try {
        $("#" + table.id).DataTable().columns.adjust().responsive.recalc();
        console.log('Resized table with id ' + table.id);
    } catch (e) {
        console.log('Failed to resize table with ' + table.id);
    }
}

Errors that I get:
DataTables warning: table id=DT-vYNNgAgn - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Would you have some pointers on how to initially load only tables that are visible and how to prevent errors from when the tables are not yet loaded yet the user decides to push thru?

table.ajax is not a function

0
0

Link to test case: none
Debugger code (debug.datatables.net):
Error messages shown: Uncaught TypeError: table.ajax is not a function
Description of problem:
I uses the latest version of datatables and editor. I want start a table refresh with table.ajax.reload( null, false ), but i get
the error Uncaught TypeError: table.ajax is not a function or Uncaught TypeError: Cannot read property 'reload' of undefined

I have no idea, why the system give this error back

Andreas

reload page and save pagination status with active SearcPane filter not possible

0
0

Link to test case: https://jsfiddle.net/themw/hdwk42yo/
Description of problem: Hello everyone,
First of all, I use version 1.1.0 of SearchPanes.The reason for this is that since version 1.1.1 the pagination is not saved when the page is refreshed (no matter if a filter is active or not). I could almost solve this problem with version 1.1.0. However, there is still the problem that if I use a filter and refresh the page, the pagination is not saved. Only if no filter is selected, the current page (pagination state) is saved. Does anyone know how to fix this problem?

Datatables Responsive Not Working With Ajax Call

0
0

Version Data Table 1.10.18
Version Responsive 2.2.6

•••••••••••Debugger code (debug.datatables.net):
JS file

let w;
var dt = $('#dt-table').DataTable({
    ajax: {
          type: 'GET',
          responsive: true,
          url: '/data/',
          dataSrc: (data) => {
            w = data.w;
            return data.data;
          }
        },
    columnDefs: [
          { targets: 0,
            className: 'control', // tried without it
            render: function ( data, type, row, meta ) {
              return row.i;
            },
          },
           { targets: 1,
             render: function ( data, type, row, meta ) {
               return row.typ;
             }
            },
            { targets: 2,
              render: function ( data, type, row, meta ) {
                return row.dea;
               }
             },
             { targets: 3,
               render: function ( data, type, row, meta ) {
                 return row.in;
                }
              },
             { targets: 4,
               render: function ( data, type, row, meta ) {
                 return row.rat;
                }
              },
             { targets: 5,
               render: function ( data, type, row, meta ) {
                 return row.se;
               },
             },
             { targets: 6,
               render: function ( data, type, row, meta ) {
                 return row.cerm;
                }
              },
             { targets: 7,
               render: function ( data, type, row, meta ) {
                 return row.ter;
                }
              },
            { targets: 8,
              render: function ( data, type, row, meta ) {
                return row.av
               },
             },
            { targets: 9,
              render: function ( data, type, row, meta ) {
                return row.acr
               },
             },
            ],

     order: [ [ 0, "asc" ]],
     autoWidth: false,
     stateSave: false,
     dom:
    "<'row '<'col-12 text-left pdb-3x'i><'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
     "<t>" +
     "<'row align-items-center'<'col-6 text-left'p>>",
     paging: true,
     lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
     pageLength: -1,
     language: {
          "search": "",
          "searchPlaceholder": "Type in to Search",
          "lengthMenu": "Show _MENU_  Data",
          "info": "Showing _START_ to _END_ of _TOTAL_ Data",
          "infoEmpty": "Showing 0 to 0 of 0 Data",
          "infoFiltered": "(filtered from _MAX_ total Data)",
          "paginate": {
              "first":      "First",
              "last":       "Last",
              "next":       "Next",
              "previous":   "Prev"
          },
      },
  });
 ```
Parameters I passed in the responsive key other than true, next object:
 ```
{
            details: {
              type: 'column',
              target: 0 // tried also with 1 and 2
            },
            breakpoints: [
             {name: 'bigdesktop', width: Infinity},
             {name: 'meddesktop', width: 1480},
             {name: 'smalldesktop', width: 1280},
             {name: 'medium', width: 1188},
             {name: 'tabletl', width: 1024},
             {name: 'btwtabllandp', width: 848},
             {name: 'tabletp', width: 768},
             {name: 'mobilel', width: 480},
             {name: 'mobilep', width: 320}
           ]
}
 ```

HTML FIle
    <table id="dt-table class="table table-bordered table-hover" style="width:100%;">
      <thead>
        <tr>
          <th class="dt-i text-left text-secundary">
            I
          </th>
          <th class="dt-typ">
            Typ
          </th>
          <th class="dt-dea">
            Dea
          </th>
          <th class="dt-in">
            In
          </th>
          <th class="dt-rat">
            Rat
          </th>
          <th class="dt-se">
            Security
          </th>
          <th class="dt-cerm">
            Cerm
          </th>
          <th class="dt-ter">
             Ter
          </th>
          <th class="dt-av">
            Av
          </th>
          <th class="dt-ac"></th>
        </tr>
      </thead>
    </table>

```
Error messages shown: No error message
Description of problem: When used a ajax call to insert the data into the table the responsiveness doesn't work, but when it's done by initializing the datatable after, it does work... for my project I required to do it all through ajax..

Server side passing parameters

0
0

Hi,
i would need to pass 15 parameters to a php api.

But in the examples i don't see how it is done.

Example of ajax call in jquery:

$(document).ready(function() {
$("form#form1").submit(function(){

    var var1= $('input#val1').val();
    var var2 = $('input#val2').val();

           $.ajax({
                type: "POST",
                url: "api.php",
                data:   {"va1": var1, "var2": var2},
                dataType: "html",
                contentType: 'application/x-www-form-urlencoded',
                timeout: 3000

   success: function(response) {
                        $("div#response").html(response);
                },

   error: function(){
                    alert("Call failed...");
                }
            });

  });
});

How do i send the data?

Thank you

Select filters moving along columns

0
0

I'm using select filters with columns that can be hidden, but this is causing them to move along when the columns are toggled off. I'm guessing the problem is with the function buildSelect .columns([1,2]). The select filters move to columns 3 and 4 when the Toggle Columns button Position/Office is clicked (which hides both columns). I tried using column names but that didn't work. Is it possible to stop this happening? http://live.datatables.net/pusaxiyu/1/edit


clicking on scrollbar causes dropdown to close

0
0

We are facing an issue with editor plugin and selectize dropdown. In Chrome and Edge browsers, clicking on dropdown scroll closes the dropdown.

We have created a scenario. https://jsfiddle.net/muhammad_atif/3xntu5we/37/

Your help will be highly appreciated.

CakePHP 3.9 Forbidden 403 error

0
0

So I'm using the CakePHP 3.9 and using DataTables for the list of users. Whenever I try it it gives me the

403 Forbidden Error and https://datatables.net/manual/tech-notes/7 datatables error

I also allowed the url by using CakePHP Auth.

Here is the script Im using.

<script> 
    $(document).ready(function(){
        let datatable = $("#main-table").DataTable({
            'processing': true,
            "serverSide": true,
            "paginate": true,
            "ajax": {
                'url': '/datatables',
                'type': 'POST',
            },
            "columns": [
                {'data': 'ID'},
                {'data': 'code'},
                {'data': 'username'},
                {'data': 'password'},
                {'data': 'type'},
                {'data': 'created'},
                {'data': 'modified'},
            ]
        });
    });
</script>

Thanks

Add “Editor” to datatable.net in Angular

0
0

I'm getting "Property 'Editor' does not exist on type 'StaticFunctions'." error when initialising a datatables.net-editor. On the other hand i have another problem with the "select" and "buttons" parametres, says don't exist the properties in type 'Settings'.

export class EmpleadosComponent implements OnInit {


constructor() { }

ngOnInit() {
    let  dataSet = [
        ["Pepe", "Tiger Nixon", "System Architect"],
        ["Juan", "Garrett Winters", "Accountant"],
        ["Javier", "Ashton Cox", "Junior Technical Author"],
    ];



    //tabla responsive con las columnas + dataSet
    $(document).ready(function () {
        $('#example').DataTable({
            data: dataSet,
            columns: [
                { title: "Nombre"},
                { title: "Apellidos" },
                { title: "Departamento" },
             ],
            responsive: true
        });
    });
var editor;

$(document).ready(function () {
    editor = new ($.fn.dataTable as any).Editor({  // <-- Editor gives error
        ajax: "../php/staff.php",
        table: "#example",
        fields: [{
            label: "First name:",
            name: "first_name"
        }, {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "Position:",
            name: "position"
        }]
    });

    $('#example').DataTable({
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        columns: [
            {
                data: null, render: function (data, type, row) {
                    return data.first_name + ' ' + data.last_name;
                }
            },
            { data: "position" },
        ],
        select: true,   // <-- from select gives error
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit", editor: editor },
            { extend: "remove", editor: editor }
        ]
    });
});

I imported all libraries, and did all npm installs. I know datatable.net is not worth for Angular, but should be any way to solve this.

Thanks.

Large table + contact form

0
0

good afternoon

I have a large table.
Please tell me how you can implement this?
- there are 3 columns and 10,000 rows with data
- search for information in the second column
- when you click on the required line, a contact form appears, and the data from the second column is automatically entered into the "Subject" line in the contact form.

It's clear with search, but how can you do the rest?
Many thanks

MJoin Alias - Records deleted in lookup table when updating

0
0

I am using multiple Mjoins with aliases. These work OK for creating records, but when updating records, the entries corresponding to the parent table in the the lookup table are deleted.

This was I believe the subject of this post:

https://datatables.net/forums/discussion/46958/why-do-multiple-mjoins-on-tbl-with-alias-work-when-creating-records-breaks-when-updating-records

At that time, Allan, you indicated it would be fixed v1.8...

I'm using https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js

This question relates to a previous question which probably can be removed.

Viewing all 79328 articles
Browse latest View live




Latest Images