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

problem with join and create-update in the editor

0
0

Hello everybody.
In my postgresql database i split a table into 3 tables, 1 master (TM) et 1 daughters (td). t1 is linked with TM by theses columns TM.id, td.TM_id and a foreign key in td daughter table (FOREIGN KEY (TM_id) REFERENCES TM(id)).
I create a datatable with an editor for my master table TM.
In the js file editor i call a td field by using - "name": "td.field" -.
In my php editor file i use this syntax - Field::inst( 'td.field' ) - and a join like this ->leftJoin( 'td', 'td.TM_id' , '=', 'TM.id' )
For testing i put data via my phppgadmin interface.
My datatable is working well.
When i open the editor is working well with all the data in all the fields of my 2 tables TM and td.
But if i update or if i create a new line i have an error like this:

An SQL error occurred: SQLSTATE[42P01]: Undefined table: 7 ERREUR: entrée manquante de la clause FROM pour la table « TM » LINE 1: SELECT TM.id as "TM.id" FROM td WHERE TM_... ^

I already use this configuration and these sources with the DataTables Editor v1.5.5 version and it was working wery well. Now i use DataTables Editor v1.8.0.

Can you help me to find a solution please.
Lionel Humblot


Child rows animation problem - slideDown don't work

0
0

Hi, I'm trying to implement this https://datatables.net/blog/2014-10-02
to slide down and up with animation by click on table row (not the plus sign as it is in the example)

THE PROBLEM: When I click on table row, the row details (child row) is displayed, but instantly without animation. When I click on row with opened row details, the row details slide up with animation, so sliding up works fine.

This is my code:

function format ( rowData ) {
        console.log(rowData);
    var div = $('<div/>')
        .addClass( 'loading' )
        .text( 'Loading...' );

    $.ajax( {
        url: 'scripts/details.php',
        data: {
            name: rowData[0]
//              'data0': rowData[0],
        },
        dataType: 'json',
        type: 'post',
        success: function ( json ) {
            console.log(json);
            var childTable = '<div id="rowdetails" class="slider">';
.....
.....
</div>


$('#example tbody').on('click', 'tr', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        $('div.slider', row.child()).slideUp( function () {
        row.child.hide();
        tr.removeClass('shown');
        } );
    }
    else {
        row.child( format(row.data()), 'no-padding' ).show();
        tr.addClass('shown');
        $('div.slider', row.child()).slideDown();
    }
} );

Thank you

Server side paging with a generic data source (C#).

0
0

I'm very new to using Datatables and I have recently picked up a project at work that uses the library. The way the previous developer set up the Datatables was to use a generic source:

public async Task<ActionResult> DataTableAsync<TEntity>(AlertModel alert, string viewName = null) where TEntity : class
        {
            // get data
            var data = (from a in await Manager.AllAsync<TEntity>()
                        select a).ToList();

            var response = new TableModel<TEntity> 
            {
                Alert = alert,
                Data = data
            };

            // return partial data view
           return  PartialView(viewName ?? $"_{typeof(TEntity).Name}Table", response);
           
        }

The AllAsync method just returns the entire context set:

Context.Set<T>().ToListAsync();

And this is how the JavaScript for DataTables is set up:

function makeDataTable(id) {
    var selector = '#' + id;
    $(selector).DataTable({
        order: [],
        search: {
            smart: false
        },
        stateSave: true,
        columnDefs: [{
            targets: 'no-sort',
            orderable: false
        },
        {
            targets: 'date-col',
            type: 'date',
            orderSequence: [
                'desc',
                'asc'
            ]
        }],
        lengthMenu: [
            [10, 15, 20, -1],
            [10, 15, 20, 'All']
        ]
    });
    $(selector).width('100%');
}

When the context set has a lot of records it will cause an out of memory exception. How can I use Skip and Take within this generic method to return portions of the data set at a time to the table?

How to get input values inside of a column?

0
0

Hello. First, I would like to ask to anyone who read this thread to read this before:
https://stackoverflow.com/questions/53228186/jquery-datatables-cant-get-input-value-from-hidden-pages

Right. One of users suggested to use the data table API to get the values from the inputs who are hidden in the tbody because they doesn't stay in the DOM if I change the selected page.

But, how could I do that?

How can I get the last column and it's contents and transfer to a javascript code and get the input values?

Aggregates, for table, update with filtering

0
0

I've got a table and I'd like to be able to add a sum of hours in the footer, and have it update as the table filters change.

any thoughts/examples that are relevant?

Custom editor

0
0

Good afternoon
I'm trying to create a search engine to be able to select a record within a custom editor: template: '#customForm',
The field I want to filter is:
<editor-field name = "tb_palabra []. id"> </ editor-field>
I would appreciate any surgency.
A greeting.

Export to Excel button error in IE 11

0
0

I'm using DataTables with the buttons extension (specifically the Export to Excel button) to display data from SharePoint lists. It has worked great for the last year or so, but recently my users have started to get errors when opening the Excel files generated by the Export to Excel button.

When I click the button, then click "Open" in the IE prompt, Excel opens and pops up:

"We found a problem with some content in 'so-and-so.xlsx'. Do you want us to try to recover as much as we can? If you trust the source of this workbook, click Yes."

I click "Yes", and a blank workbook opens. I then get another popup that states:

"Excel completed file level validation and repair. Some parts of this workbook may have been repaired or discarded.
Replaced Part: /xl/worksheets/sheet1.xml part with XML error. Undeclared entity. Line 1, column 321020."

This only happens in IE-11. I've tested the same page in Chrome and Firefox and it works fine. After reading a similar post, I updated all of my buttons libraries with the nightly versions (datatables.buttons.min.js, buttons.datatables.min.css, and buttons.html5.min.js). I also updated to the most recent version of jszip, but I'm still getting the error.

Any suggestions on what else I can do to try to correct this? Also, is there a way for me to determine which column the Excel error message is referring to?

Button pdf export call function

0
0

How to make a custom export button? I used this code but it does not work.
Help me please.

<button type="button" class="btn btn-info" id="export-button-pdf">Export</button>


    $("#export-button-pdf").on("click", function () {
        table.button('.buttons-pdf').trigger();
    });

Responsible table and click

0
0

hi

I have an datable who is responsive

var specificationsTable = $('#specificationsTable').DataTable({
    "language": {
        "url": url
    },
    'dom': 'tp',
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: ''
        }
    },
    "bLengthChange": false, //hide 'show entries dropdown
    "paging": false,
    "searching": false,
    "info": false
});

I have this click event

$("#specificationsTable tbody").on('click', 'td', function(e) {

    var tr = $(this).closest('tr');

    //in case row is displaye on many row... (responsive)
    if ( $(tr).hasClass('child') ) {
        tr = $(tr).prev();  
    }


    //delete button
    if(specificationsTable.cell(this).index().column == specificationsTable.columns()[0].length-1){
       ...
    }

});

That work when all column are displayed on the same row... but otherwise, this line
specificationsTable.cell(this).index().column

is not working, I get

Cannot read property 'column' of undefined

thanks

Column filter not updating values on pagelength change

0
0

Hi

I have put a select dropdown outside my table which filters the region column. This works fine; the problem is that only the amount of values in the pagelength variable are populated. Say I have 50 regions, but on page load the pagelength is set to 20, then only a few regions will populate in the dropdown, and when the length is changed to 100, the amount of regions dont increase with it.

    initComplete: function () {
        this.api().columns('.select-filter').every( function () {
                var column = this;
            
                var select = $('<select class="form-control"><option value=""></option></select>')
                   .appendTo( $('.col-sm-6:eq(1)', table.table().container()))  // 
    .appendTo($(column.header()))
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } ); 

I need to have all the regions populated in the dropdown irrespective of the pagelength variable. Please note I am using server side processing.

Thanks!

Uncaught TypeError: extender is not a function

0
0

I'm trying to implement DataTable editor in my application and currently facing issue> Uncaught TypeError: extender is not a function whenonBlur: 'submit'is called.
When I tried to debug the lib I found out that there is no function _fnExtend which makes var extender = $[O12][J3p][u12][o3p]; extender undefined.

Single and double click does not work together

0
0

I am trying to implement both single click and double click of the row but it is not working. Here is the code:

        $('#tblEmployee').on('click', 'tbody td:not(:first-child)', function () {
            alert('single click');
            // do something on single click
        });

        $('#tblEmployee').on('dblclick', 'tbody td:not(:first-child)', function () {
            alert('double click');
            var table = $('#tblEmployee').DataTable();
            var row = table.row(this.closest('tr')).data();
            console.log(row.MId);
          // do something on double click 
        });

Whether I click single or double it always execute first function and never call the second, any idea why it is so and how can I resolve it?

Thanks

TypeError after update to 1.8.0

0
0

Hi guys,

I've upgraded my application with editor 1.8.0 this weekend, but since that moment I get the following error after editing my records:
[Error] TypeError: a is not a function. (In 'a({},n.data(),!0)', 'a' is undefined)
edit (dataTables.editor.min.js:109:159)
_dataSource (dataTables.editor.min.js:80:320)
_submitSuccess (dataTables.editor.min.js:98:346)
(anonieme functie) (dataTables.editor.min.js:94:471)
(anonieme functie) (dataTables.editor.min.js:76)
i (datatables.min.js:14:27455)
fireWith (datatables.min.js:14:28215)
y (datatables.min.js:16:22968)
c (datatables.min.js:16:26991)

Does anyone have a clue what's wrong?

Kind regards,
nessinits

dependent() doesn't fire for field where type="date"

Rendering problem?

0
0

HI ;)

Open my site (see screenshot 1)
-> table is rendered
-> perfect
Click on the header-link (I use a jquery to collapse/store the status)
-> table is collapsed
-> fine
Click on page refresh
-> table is collapsed
-> fine
Display table via click on header-link
-> table is shown again
-> table is rendered in a new way
-> not perfectly shown (see screenshot 2)

I guess it is wrong rendered?! but i am not sure why?


BTW: will buy the license for editor next week - are data sent to you to check or is the check only for license?


Radiobuttton with the data of a column as value for the value attribute ?

0
0

I use Python flask in a web app and use datatable in server side mode to display data. The data can be little as well as high, depending on the user input file. I use your solution because it the best to dont have long loading page causing timeout exception in the app.

With some research I succeed to modify the exemple given by https://github.com/SergioLlana/datatables-flask-serverside that he adapt datatable to Python Flask. I add the mrender in his code to add radio Button.

The code is as follow :

js script (loaded in the web page)

/*jslint browser: true*/
/*global $*/


$(document).ready(function () {
  $('#serverside_table').DataTable({
    bProcessing: true,
    bServerSide: true,
    sPaginationType: "full_numbers",
    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
    bjQueryUI: true,
    sAjaxSource: '/tables/serverside_table',
    columns: [
      {mRender: function (data, type, row) {return '<input type="radio" name="indivdu" value="">';
               }
      },
      {"data": "Column A"},
      {"data": "Column B"},
      {"data": "Column C"},
      {"data": "Column D"}
    ]
  });
});

the html template using by flask with the script section to populate the table

{% extends "template.html" %}
{% block title %}

<title>Serverside Table</title>

{% endblock %}
{% block body %}

<script type="text/javascript" src="/static/js/serverside_table.js"></script>



<div class="table_container">
  <table id="serverside_table" cellspacing="0" class="table table-striped table-bordered" style="width:100%">
    <thead>
      <tr>
        <th id="r1"></th>
        <th>Column A</th>
        <th>Column B</th>
        <th>Column C</th>
        <th>Column D</th>
      </tr>
    </thead>
  </table>
</div>

{% endblock %}

the data for this exemple is as follow, generated and provided by the python code at the server side :

DATA_SAMPLE = [
    {'A': 'Hello!', 'B': 'How is it going?', 'C': 3, 'D': 4},
    {'A': 'These are sample texts', 'B': 0, 'C': 5, 'D': 6},
    {'A': 'Mmmm', 'B': 'I do not know what to say', 'C': 7, 'D': 16},
    {'A': 'Is it enough?', 'B': 'Okay', 'C': 8, 'D': 9},
    {'A': 'Just one more', 'B': '...', 'C': 10, 'D': 11},
    {'A': 'Thanks!', 'B': 'Goodbye.', 'C': 12, 'D': 13}
]

returning data like object in json : {'data': DATA_SAMPLE}

I would like just a simple thing because I'm a beginneer in JavaScript and JQuery, Ajax ... etc...

I just want the value of one column are the value in the "value" balise of the radio button to their corresponded row:

for example we can choose the column D as ID and the columns with radio button will have the value of the column D as the value for the value balise

The radio button will be like :

input type="radio" name="indivdu" value="4"
input type="radio" name="indivdu" value="6"
input type="radio" name="indivdu" value="16"
input type="radio" name="indivdu" value="9"
input type="radio" name="indivdu" value="11"
input type="radio" name="indivdu" value="13" "

I note that the ID is just for example , I will use ID provided in the user file formated as follow : @I#@ where # is a number (user file format : https://fr.wikipedia.org/wiki/GEDCOM) I dont use SQL, because of the policy that represent the data .

How I can modify the JS script to have my radiobuttton with the data of a column as value for the value attribute ?

Thanks for all !

Yoan

Datatables Images Positioning PDF

0
0

hello there guys I am new to the datatables I am looking for a way to position an image in PDF I will put the image in either upper left corner or right upper corner of the PDF file is there a way to do it?

No Data available in table failing to show on no data.

0
0

Sometimes my API will return back an error of no user being returned. {"error":"No found users | CODE: XXX-XXX"}
Data Tables is able to show the error message in a alert, however it doesn't update the table to say "No Data available in table" until it's updated in some way (Next page, changing sorting, ETC)

Is there something I can change to allow for it to reload the table correctly to show the "No data available in table" after/before the alert is confirmed.

Need Help Getting Started with Editor

0
0

I have an existing DataTable that works fine. I am now attempting to implement Editor but get error:
DataTables warning: table id=example - Requested unknown parameter 'id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4.
I've included my page and code below.

Have not been able to figure this one out.

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>DataTables Editor - tblGOP</title>
        <link rel="stylesheet" type="text/css" href="../datatables/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="../datatables/generator-base.css">
        <link rel="stylesheet" type="text/css" href="../datatables/Editor-1.8.0/css/editor.dataTables.min.css">
        <script type="text/javascript" charset="utf-8" src="../datatables/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="../datatables/Editor-1.8.0/js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/GOP.js"></script>
    </head>
    <body class="dataTables">
        <div class="container">
                    <div class="row">
                    <div class="col-12">
                        <header class="text-center mb-4">
                        <h2 class="h2 g-color-black g-font-weight-600">GOP Reviews (QA)</h2>
                        </header>
                                <div class="table-responsive m-t-40">
                                    <table id="example" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Number</th>
                                                <th>Subject</th>
                                                <th>Revision</th>
                                                <th>Review Due Date</th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th>ID</th>
                                                <th>Number</th>
                                                <th>Subject</th>
                                                <th>Revision</th>
                                                <th>Review Due Date</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                    </div>
                    </div>
        </div>
    </body>
</html>

=============================================================================

var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../GOPA.asp",
        table: "#example",
        fields: [ {
                label: "ID",
                name: "id"
            }, {
                label: "Number",
                name: "number"
            }, {
                label: "Subject:",
                name: "subject"
            }, {
                label: "Revision:",
                name: "revision"
            }, {
                label: "Review Due Date:",
                name: "review_due_date"
            }
        ]
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../GOPA.asp",
        columns: [
            { data: "id" },
            { data: "number" },
            { data: "subject" },
            { data: "revision" },
            { data: "review_due_date" }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

=============================================================================

{"data" : [["1","SA-101","Document/Revision Review/Approval Procedures","A","July"],["2","SA-102","Quality Document Style Guide","A","July"],["3","SA-103","Corrosion Prevention and Control Program","C","November"],["4","SA-104","Tool Control Procedures","D","April"],["5","SA-105","Maintenance Control","C","December"],["6","SA-106","Individual Material Readiness list Program","C","December"],["7","SA-107","Gas Turbine Engine Test System and Certification","D","June"],["8","SA-108","Electrostatic Discharge (ESD)","C","December"],["9","SA-109","Central Technical Publication Library (CTPL)","D","January"],["10","SA-110","Naval Aviation Maintenance Discrepancy Reporting Program","C","January"],["11","SA-111","Logs and Records/Technical Directive Compliance","C","January"],["12","SA-112","Foreign Object Damage Prevention Program","C","February"],["13","SA-113","Quality Assurance Audit","F","June"],["14","SA-114","Maintenance Safety Program","B","February"],["15","SA-115","Battery Maintenance Safety","C","February"],["16","SA-116","Weight Handling Program","D","March"],["17","SA-117","Ordnance Qualification Certification Program","C","March"],["18","SA-118","Maintenance Training Program","F","May"],["19","SA-119","GSE, GSE SEPMS, SE Training & Licensing, SE Misuse and Abuse","C","March"],["20","SA-121","Hazardous Material Control and Management","C","April"],["21","SA-122","Metrology and Calibration","C","June"],["22","SA-123","Fuel System Maintenance Procedures","D","April"],["23","SA-124","Safe for Flight","B","May"],["24","SA-125","Fuel Surveillance","E","May"],["25","SA-126","Tire and Wheel Maintenance Safety Procedures","C","April"],["26","SA-127","Quality Assurance Procedures","D","July"],["27","SA-128","Engine Turn-up and Licensing Program","C","July"]]}

=============================================================================

Invalid JSON response

0
0

I'm going crazy for an "Invalid JSON response" error that I can not understand...
Chrome debug->network shows this message:

Notice: Undefined index: order in C:\inetpub\wwwroot\test\php\Editor.php on line 1567
{"data":[{"DT_RowId":"row_1","visite":{"vis_user":"4","vis_data":"10-11-2018","vis_cli":"5","vis_esito":"0"},"utenti":{"ute_user":"Admintest"},"clienti":{"cli_ragsoc":"Abcdefg"}}],"options":[],"files":[],"draw":1,"recordsTotal":"1","recordsFiltered":"1"}

$(document).ready(function() {
    var table = $('#visite-all-home').DataTable( {
        responsive: true,
        processing: true,
        serverSide: true,
        ajax: {
            url: "php/visite-all-home.php",
            type: "POST"
        },  
        columns: [
            {data: "visite.vis_data"},
            {data: "utenti.ute_user"},
            {data: "clienti.cli_ragsoc"},   
            {data: "visite.vis_esito", 
                render: function ( val, type, row ) {
                    return val == 0 ? "Negativo" : "Positivo";
                                }
            }
        ],
        select: false,
        searching: false, 
        ordering: false,
        paging: false,
        info: false,
        language: {
            emptyTable:     "Nessun dato presente nella tabella",
            zeroRecords:    "Nessun dato presente nella tabella"
        }
    } );
} );

include( "DataTables.php" );

use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

Editor::inst( $db, 'visite', 'vis_id' )
    ->fields(
        Field::inst( 'visite.vis_user' ),
        Field::inst( 'utenti.ute_user' ),
        Field::inst( 'visite.vis_data' )
            ->getFormatter( Format::dateSqlToFormat( 'd-m-Y' ) ),

        Field::inst( 'visite.vis_cli' ),    
        Field::inst( 'clienti.cli_ragsoc' ),
        Field::inst( 'visite.vis_esito' )
    )
    ->leftJoin( 'utenti', 'ute_id', '=', 'visite.vis_user' )
    ->leftJoin( 'clienti', 'cli_id', '=', 'visite.vis_cli' )
    ->process( $_POST )
    ->json();
?>

TABLE `visite`
`vis_id` int(10) UNSIGNED AUTOINCREMENT NOT NULL,
`vis_user` smallint(5) NOT NULL,
`vis_cli` mediumint(8) NOT NULL,
`vis_data` datetime DEFAULT NULL,
`vis_esito` tinyint(3) DEFAULT '0' COMMENT '0=esito negativo, 1=esito positivo, 2=firmato contratto'

INSERT INTO `visite` (`vis_id`, `vis_user`, `vis_cli`, `vis_data`, `vis_esito`) VALUES
(1, 4, 5, '2018-11-10 00:00:00', 0);

PRIMARY KEY (`vis_id`),
KEY `visit_cli` (`vis_cli`),
KEY `visit_user` (`vis_user`),
KEY `visit_date` (`vis_data`),

It seems like a very simple program ... I'm probably tired and I can not find a trivial mistake, but I'm frustrated ...
Thanks to those who help me understand,

Giuseppe

Viewing all 79323 articles
Browse latest View live




Latest Images