Are you the publisher? Claim or contact us about this channel

Embed this content in your HTML


Report adult content:

click to rate:

Account: (login)

More Channels


Channel Catalog

Channel Description:

Recent Discussions — DataTables forums

older | 1 | .... | 2236 | 2237 | (Page 2238) | 2239 | 2240 | .... | 2326 | newer

    0 0
  • 11/06/18--03:57: DataTables not working
  • My solution builds without errors. When I load the webpage the data comes up, but there are no table lines/search etc.
    Any help would be appreciated.



        <link rel="stylesheet" type="text/css" href="" />
        <script type="text/javascript" charset="utf8" src=""></script>
        <script src=""
        <script type="text/javascript">
            $(document).ready(function () {
        <table id="WTM_TABLE" class="display" style="width:100%">
                    <th>Task Name</th>
                    <th>Start Date/Time</th>
                    <th>End Date/Time</th>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Garrett Winters</td>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>

    0 0


    I have got a feature request - not sure if some has implemented something similar. If so, then please share a reference.

    Request - Our users want to copy over comments entered in row 1 to other rows say until row 10... like we do in excel


    0 0

    I am new at datatables so i wanted to know what is wrong with my code here. I want to pull data from database and display it to the datatable but it does not show any error on the console and it does not display any data.

    attached is my ajax code.
    thank you

    0 0
  • 01/04/18--06:39: JQuery 3.2.1 Deprecations
  • I have Datatables 1.10.16
    It was said that it should not have problem with jquery 3, but it still have with focus() and blur().

    JQMIGRATE: jQuery.fn.focus() event shorthand is deprecated

    My jquery version is 3.2.1

    0 0
  • 11/06/18--07:21: select2 dependencies...
  • I trying to get my head around the dependent method and setting a value for a select2-field. I have a field defined like this:

                        "label": "TPM",
                        "name": "TPM",
                        "type": "select2",
                        opts: {
                            //def: 'BR',
                            ajax: {
                                dataType: "json",
                                url: '/Registraties/getMethodes',
                                data: function (params) {
                                    var query = {
                                        tyb: editor.val('TYB'),
                                    return query; 
                                processResults: function (data) {
                                    return {
                                        results: data

    This gets its data using an ajax call and passes the contents of the TYB-field to the request. Works fine.
    Then I have a dependency defined like this:

            editor.dependent('TYB', function (val, data, callback) {
                    url: '/Registraties/TypeBehandelingUpdated',
                    type: 'post',
                    dataType: 'json',
                    data: { 
                        "TYB": val,
                        "PRODUCTID": data.values.PRODUCTID, 
                        "TPS": data.values.TPS, 
                    success: function (json) {
                        callback(json); // callback naar de editor zodat die de velden kan bijwerken

    So, when the TYB field is changed, I want to make some changes to the form. I do an ajax call, and on the serverside I decide which fields I need to enable or disable, and if I want to set a value for something. This returns something like the following:


    The problem here is the value for the TPM field. In the network-tab in the debugging console I see a call "http://localhost:53686/Registraties/getMethodes?initialValue=true&value=%22BR%22", and the result is: "{"id": "BR", "text": "BRANDEN" }". Looks good to me, but the TPM field stays empty.
    Btw: when I try to set a default value for that field with the option " def: 'BR' ", then I see the same ajax call and then the field is set correctly.

    I have a .Net background, and I try to get my head around all this jquery-magic, but this is too complicated for me. If anyone with some more experience would like to help me figure this out, that would be greatly appreciated! :-)

    0 0

    We are trying to add the buttons to a datatable. The table itself works fine, but the buttons do not show.

    Here is our ts file:

    import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
    import {HttpClient} from '@angular/common/http';
    import {Router} from '@angular/router';
    import * as $ from 'jquery';
    import '';
    import '';

    selector: 'app-datatable',
    templateUrl: './component.html',
    styleUrls: ['./component.scss']
    export class AppDataTableComponent implements OnInit {

    public rows: any[] = [];
    constructor(private http: HttpClient,              
              private chRef: ChangeDetectorRef) { }
    ngOnInit() {
        this.http.get('/api/events').subscribe( resp => {
            this.rows = resp['data'];
            const table: any = $('#journalTable');
                this.datatable = table.DataTable({
                  buttons: [
                    'copyHtml5', 'csvHtml5'


    html looks like this:

    <table id="journalTable" class="table table-hover">
    <tbody >
    <tr *ngFor="let row of rows">

    We've also installed the following components:
    "": "^1.10.19",
    "": "^1.10.19",
    "": "^1.5.4",
    "": "^1.5.4",
    "": "^1.5.1",
    "": "^1.10.19",
    "": "^2.2.3",
    "": "^2.2.3",
    "": "^2.2.3",
    "": "^1.1.0",
    "": "^1.5.1",

    What do we need to do to get the buttons to show up on our data table?

    0 0

    Is it possible to rename a file based on an editor input field before uploading it? I was thinking of using the custom upload action like below.

    I want to upload a file (with any name) and rename it using another field from the editor before it is stored in its final location.

    Field::inst( 'transtest.SerialNo' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A serial number is required' ) ) ),
    Field::inst( '' )
                    Upload::inst( function ( $file, $id ) {
                        $SystemPath = '\\\\SHARES\\IMAGES\\GIS\\Pictures\\';
                        $WebPath = 'http://appsserv/app/power/pictures/';
                        $extension = '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
                        $NewName = (the transtest.SerialNo from above);
                        move_uploaded_file( $file['tmp_name'], $SystemPath.$NewName.$extension);
                            return $id
                    } )
            ->db( 'images', 'name', array(
                    ''  => Upload::DB_FILE_NAME,
                    'images.size'  => Upload::DB_FILE_SIZE,
            ) )
            ->validator( Validate::fileSize( 5000000, 'Files must be smaller that 5 MB' ) )
            ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
    ->leftJoin( 'images', 'transtest.image', '=', '' )

    Is there a way to access the transtest.SerialNo field in order to rename the uploaded file using it?

    I attempted this route:

    the solution all the way at the bottom...but I couldnt get the writeCreate or writeEdit to fire. I verified the custom upload was writing to the db but they would not fire.

    0 0
  • 11/06/18--10:55: Wix?
  • How would I install this onto my site?

    0 0
  • 09/24/18--17:01: Editor - Query Performance
  • Having a new issue with a controller that I've been using for a while. In my query controller I have several fields and a few left joins. I also have 5 database functions that the controller calls and uses. I've noticed that after recently adding the 5th function, performance has significantly worsened on my API call - 1.9 seconds in the past to 11.49 seconds now for only 65 records. I've isolated it to this 5th function as the issue. When I run the full query taken from the DTE debug output in the API in Sql Server Management Studio, the whole query (the same 65 records) runs in less than one millisecond.

    This function differs from the other four in that it creates a temporary variable table, inserts the records, does a calculation, returns the float result. The other four do a basic lookup.

    I'm running DTE 1.10.4 / ASP.NET/C#. Below is the controller code with the problematic function isolated.

    using (var db = new Database(settings.DbType, settings.DbConnection))
                    var response = new Editor(db, "logan_dvpr", "dvprID")
                        .Field(new Field("logan_dvpr.dvprID"))
                        .Field(new Field("logan_dvpr.dvprNumber"))
                        .Field(new Field("logan_dvpr.jobNumber"))
                        .Field(new Field("logan_dvpr.customerDesc"))
                        .Field(new Field("logan_dvpr.percentReleased"))
                        .Field(new Field("logan_dvpr.percentProcured"))
                        .Field(new Field("logan_dvpr.rd"))
                        .Field(new Field("logan_dvpr.dvprCompleted"))                    
                        .Field(new Field("dbo.fn_getDVPRTimeE(dvprID) as estHours"))
                        .Field(new Field("dbo.fn_getDVPRTimeC(dvprID) as compHours"))
                        .Field(new Field("dbo.fn_getDVPRColorYN(dvprID) as colorYN"))
                        .Field(new Field("dbo.fn_getTaskStatus(dvprID) as taskStatus"))
                        .Field(new Field("dbo.fn_getDVPRTime(dvprID) as pcomp"))
                        .Field(new Field("logan_dvpr.totalHoursAccrued"))
                        .Field(new Field("logan_dvpr.estTime"))
                        .Field(new Field("logan_dvpr.deliveryDate")
                        .Field(new Field("logan_dvpr.estStartDate")
                        .Field(new Field("logan_dvpr.engTeamLead")                        
                            .Options("logan_users_master", "userID_DVPR", "fullName", q=>q.Where("deptID_DVPR", "2"))
                         .Field(new Field("logan_dvpr.projEngineer")
                            .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Field(new Field("logan_dvpr.leadDesignEng")
                            .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Field(new Field("logan_dvpr.hydSupport")
                            .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Field(new Field("logan_dvpr.elecSupport")
                            .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Field(new Field("logan_dvpr.mechSupport")
                            .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Field(new Field("logan_dvpr.projectManager")
                            .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "9"))
                        .Field(new Field("logan_dvpr.salesman")
                            .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "12"))
                        .Field(new Field("logan_dvpr.qualityRep")
                            .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "10"))
                        .Field(new Field("logan_dvpr.statusID")
                            .Options("logan_status_dvpr", "statusID", "status")
                        .Field(new Field("logan_dvpr.estCompDate")
                        .Field(new Field("etl.fullName as etlName"))
                        .Field(new Field("pe.fullName as peName"))
                        .Field(new Field("lde.fullName as ldeName"))
                        .Field(new Field("hs.fullName as hsName"))
                        .Field(new Field("es.fullName as esName"))
                        .Field(new Field("ms.fullName as msName"))
                        .Field(new Field("pm.fullName as pmName"))
                        .Field(new Field("logan_status_dvpr.status"))
                        .Field(new Field("logan_status_dvpr.displayColor"))
                        .Field(new Field("logan_dvpr.lqlID")
                            .Options("logan_DocQualityLevel", "levelID", "levelName")
                        .Field(new Field("logan_DocQualityLevel.levelName"))
                        .LeftJoin("logan_status_dvpr", "logan_status_dvpr.statusID", "=", "logan_dvpr.statusID")
                        .LeftJoin("logan_DocQualityLevel", "logan_DocQualityLevel.levelID", "=", "logan_dvpr.LQLID")
                        .LeftJoin("logan_users_master etl", "etl.userID_DVPR", "=", "logan_dvpr.engTeamLead")
                        .LeftJoin("logan_users_master pe", "pe.userID_DVPR", "=", "logan_dvpr.projEngineer")
                        .LeftJoin("logan_users_master lde", "lde.userID_DVPR", "=", "logan_dvpr.leaddesigneng")
                        .LeftJoin("logan_users_master hs", "hs.userID_DVPR", "=", "logan_dvpr.hydsupport")
                        .LeftJoin("logan_users_master es", "es.userID_DVPR", "=", "logan_dvpr.elecsupport")
                        .LeftJoin("logan_users_master ms", "ms.userID_DVPR", "=", "logan_dvpr.mechsupport")
                        .LeftJoin("logan_users_master pm", "pm.userID_DVPR", "=", "logan_dvpr.projectmanager")
                        .Where("logan_dvpr.statusID", "10", "<>")
                        .Where("logan_dvpr.dvprCompleted", "0", "=");

    Here is the code for the function:

    DECLARE @Result float
        DECLARE @tempTable table (taskID int, pcomp float, estTime int);
        --Grab %Complete for each task in this dvpr
        insert into @tempTable (taskID, pcomp, estTime)
        Select ts.taskID,
                WHEN taskCompleteYN = 'Y' THEN 1
                WHEN estTime = 0 or estTime IS NULL THEN 0
                WHEN taskCompleteYN <> 'Y' AND esttime is not null AND (SUM(datediff(second,timein,timeout)) / 3600.0)/ esttime < .75 THEN (SUM(datediff(second,timein,timeout)) / 3600.0) / esttime
                WHEN taskCompleteYN <> 'Y' AND esttime is not null AND (SUM(datediff(second,timein,timeout)) / 3600.0)/ esttime >= .75 THEN .75         
                ELSE 0
            END AS Task_PCOMP,      
            ISNULL(ts.estTime, 1) as estTime        
            from  logan_dvprTasks ts
            left join logan_dvpr_timelog t on t.taskID = ts.taskID
            where ts.statusID <> 10 
            and ts.dvprID = @dvprID
            group by ts.taskID, ts.EstTime, ts.taskCompleteYN, ts.timed_yn
        --Now calculate the average of the %complete values
        SELECT @Result = ROUND( (SUM(estTime * pcomp)) / (SUM(estTime)) * 100 , 0) 
        from @tempTable
        where estTime <> 0 AND estTime is not null
        RETURN @Result

    Why is this function causing so much of a headache when it runs quickly in the database? Thanks in advance.

    0 0

    Hello All, Help me please.
    I'm having trouble rebooting AJAX, when I restart ajax, then the color of the column disappears.
    Maybe, someone knows how to solve this problem?
    My render code.
    Video -
    My full code -

                "render": function (data, type, full, meta) {
                    var cellText = $(data).text();
                    if (type === 'display' && (cellText == "Так" || data == 'Так')) {
                        var rowIndex = meta.row + 1;
                        var colIndex = meta.col + 1;
                        $('#table tbody tr:nth-child(' + rowIndex + ') td:nth-child(' + colIndex + ')').css('background-color', '#ff9797').css('color', '#ffffff');
                        return data;
                    } else {
                        return data;

    0 0

    I am using datatables and the editor to display a specific table from the datatable. One of the fields is a textarea and the the entry includes html tags such as <p> <br> etc...
    The row details pop up displays eveyrthing fine but the editor popup is treating the tags like text and actually showing the <p>, <br> to the user. How do I fix that?

    0 0

    Hello all.... my first question as this is my first attempt to use the Editor. I have a DataTable populated from a Gridview and have also applied Grouping to the DataTable. My first attempt results in the bubble display on the far left of the web page.

    Here is my JS stack:

    <script src="/Scripts/umd/popper.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/datatables.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/DataTables-1.10.16/js/dataTables.bootstrap4.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Buttons-1.5.1/js/buttons.print.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Buttons-1.5.1/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Buttons-1.5.1/js/buttons.colVis.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Buttons-1.5.1/js/buttons.bootstrap4.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/RowGroup-1.0.2/js/dataTables.rowGroup.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Select-1.2.5/js/" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Editor-1.8.0/js/dataTables.editor.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Editor-1.8.0/js/editor.bootstrap4.js" type="text/javascript"></script>

    My beginning JS with the editor:
    var editor;
    $(document).ready(function () {
    editor = new $.fn.dataTable.Editor( {
    table: "#GridView1",
    fields: [ {
    label: "Name:",
    name: "Departments"
    }, {
    label: "First name:",
    name: "FunctionName"
    }, {
    label: "Last name:",
    name: "iSDefault"

                    }, {
                        label: "Manager:",
                        name: "Hourlyrate"
            } );

    Columns under the DataTable Code:
    columns: [

                        { data: "Departments" },
                        { data: "FunctionName" },
                        { data: "iSDefault" },
                        { data: "Hourlyrate" }

    I will, in the end, be wanting to write the changes back using the gridview and c# to update the database. I'm not using Ajax at this point to serialize the data. any help is appreciated. This is a .NET system version 4.7.1,

    thx, Glen

    0 0

    New to DataTables so please pardon if a re-post.
    Is it possible to highlight an entry (either bold or different color) in a row if it contains a pattern? Eg.,
    Make the 3rd entry bold if it contains a 'G'.
    T/G G/G **A/G** NA A/A NA

    To take it further, is it possible to make only 'G' appear in bold (and not 'A')?
    T/G G/G A/**G** NA A/A NA
    Thanks so much!

    0 0
  • 11/06/18--14:06: Custom Functions in Editor
  • Hi

    I have been playing with Editor (and just bought a license).

    The editor instances I am using at the moment are not fed by Ajax data and the editing is always done inline.

    Each of my cells needs different processing functions when data has been changed. These are just plain JS/Jquery functions (no server side processing takes place).

    My question is: what is the best way to call these functions, so that each cell can be processed independently?

    Thanks for any help.


    0 0

    I would like to do something like this:
    with data for my users. However, I pass the the DataTable C# Object to the gridview from a method. This is my normal table report. I would like to take it one step farther and edit the data and pertform an .update()l on the SqlDataAdapter and push everything back to the database.

    Any guidelines you can give me?

    0 0

    Hi, guys! I have a project with DataTables and it is mainly statistical numbers which stay the same, except for today's date. The table data is handled server-side. What I notice is that when data is loaded and when sorting (asc or desc) is applied, DataTables makes another ajax call to get the current data and then sorts. Well, in my case I would like to have sorting the currently displayed values by column without making another ajax request but just to do the sorting. Any idea how to achieve this?

    0 0

    Hi all,
    I have problem with my DataTable when i want to sort it by price. It takes prices like strings so 90 is larger then 944. How can i manualy change column type. And how can i make it dynamically, because user can choose columns which he wants to see and also change order of columns.

    Any advice?


    0 0

    Hey everybody,

    I need multiple DataTables on my Website with different numbers of columns. I have 3 tables with 3 different IDs and I'm also coding 3 different variables for each table but there's only one table which is a DataTable.
    Here is an example:

    var table = $('#table1').DataTable({
           paging: false,
            select: {
                style: 'single'
            columnDefs: [
                    orderable: false,
                    searchable: false
        var table2 = $('#table2').DataTable({
            paging: false,
            select: {
                style: 'single'
            columnDefs: [
                    orderable: false,
                    searchable: false

    just #table1 is a DataTable..

    0 0

    My error

    jquery.dataTables.min.js:124 Uncaught TypeError: Cannot read property 'bVisible' of undefined
    at r.<anonymous> (jquery.dataTables.min.js:124)
    at r.iterator (jquery.dataTables.min.js:100)
    at r.<anonymous> (jquery.dataTables.min.js:124)
    at r.visible (jquery.dataTables.min.js:102)
    at HTMLInputElement.<anonymous> (listtransaction:189)
    at HTMLInputElement.dispatch (jquery.min.js:3)
    at HTMLInputElement.r.handle (jquery.min.js:3)
    (anonymous) @ jquery.dataTables.min.js:124
    iterator @ jquery.dataTables.min.js:100
    (anonymous) @ jquery.dataTables.min.js:124
    (anonymous) @ jquery.dataTables.min.js:102
    (anonymous) @ listtransaction:189
    dispatch @ jquery.min.js:3
    r.handle @ jquery.min.js:3

    my code

    plz help me

    0 0
  • 11/07/18--01:00: hebrew export to excel
  • i have data with hebrew character
    i cannot export it to excel:it's show wrong character;

    any one resolve this problem?

older | 1 | .... | 2236 | 2237 | (Page 2238) | 2239 | 2240 | .... | 2326 | newer