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

DataTables not working

$
0
0

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.

Thanks

code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#WTM_TABLE').DataTable();
        });
    </script>

</head>
<body>

    <table id="WTM_TABLE" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Task Name</th>
                <th>Start Date/Time</th>
                <th>End Date/Time</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Drag value and copy over to other rows - Like excel

$
0
0

Hi,

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

thanks
S

No data showing on table when i have a data on database

$
0
0

Hello,
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

JQuery 3.2.1 Deprecations

$
0
0

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

select2 dependencies...

$
0
0

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) {
            $.ajax({
                
                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:

{  
   "show":[  
      "TPM",
      "HPG",
   ],
   "hide":[  
      "BWL",
   ],
   "values":{  
      "TPM":"BR",
   },
   "labels":{  
      "HVH":"Hoeveelheid:"
   }
}

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! :-)

Trying to add buttons using Angular 6

$
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 'datatables.net';
import 'datatables.net-buttons';

@Component({
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'];
        this.chRef.detectChanges();

        const table: any = $('#journalTable');
            this.datatable = table.DataTable({
              buttons: [
                'copyHtml5', 'csvHtml5'
              ]});
    });

}

}

html looks like this:

<div>
<table id="journalTable" class="table table-hover">
<thead>
<tr>
<th>Subject</th>
<th>Start</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let row of rows">
<td>{{row.subject}}</td>
<td>{{row.startDate}}</td>
</tr>
</tbody>
</table>
</div>

We've also installed the following components:
"datatables.net": "^1.10.19",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-buttons-dt": "^1.5.4",
"datatables.net-colreorder-bs4": "^1.5.1",
"datatables.net-dt": "^1.10.19",
"datatables.net-responsive": "^2.2.3",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-responsive-dt": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.0",
"datatables.net-scroller-bs4": "^1.5.1",

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

Rename uploaded file before moving to final location?

$
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( 'images.name' )
        ->upload(
                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(
                'images.name'  => 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', '=', 'images.name' )

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

I attempted this route:

https://datatables.net/forums/discussion/44969/editor-upload-file-exists-confirm-overwrite-prompt

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.

Wix?

$
0
0

How would I install this onto my site?


Editor - Query Performance

$
0
0

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")
                    .Debug(true)
                    .Model<DVPRDataModel>()
                    .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")
                        .GetFormatter(Format.DateSqlToFormat("MM/d/yyyy"))
                        .SetFormatter(Format.DateFormatToSql("MM/d/yyyy")))
                    .Field(new Field("logan_dvpr.estStartDate")
                        .GetFormatter(Format.DateSqlToFormat("MM/d/yyyy"))
                        .SetFormatter(Format.DateFormatToSql("MM/d/yyyy")))
                    .Field(new Field("logan_dvpr.engTeamLead")                        
                        .Options("logan_users_master", "userID_DVPR", "fullName", q=>q.Where("deptID_DVPR", "2"))
                        .Validator(Validation.DbValues()))
                     .Field(new Field("logan_dvpr.projEngineer")
                        .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Validator(Validation.DbValues()))
                    .Field(new Field("logan_dvpr.leadDesignEng")
                        .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Validator(Validation.DbValues()))
                    .Field(new Field("logan_dvpr.hydSupport")
                        .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Validator(Validation.DbValues()))
                    .Field(new Field("logan_dvpr.elecSupport")
                        .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Validator(Validation.DbValues()))
                    .Field(new Field("logan_dvpr.mechSupport")
                        .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "2"))
                        .Validator(Validation.DbValues()))
                    .Field(new Field("logan_dvpr.projectManager")
                        .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "9"))
                        .Validator(Validation.DbValues()))
                    .Field(new Field("logan_dvpr.salesman")
                        .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "12"))
                        .Validator(Validation.DbValues()))
                    .Field(new Field("logan_dvpr.qualityRep")
                        .Options("logan_users_master", "userID_DVPR", "fullName", q => q.Where("deptID_DVPR", "10"))
                        .Validator(Validation.DbValues()))
                    .Field(new Field("logan_dvpr.statusID")
                        .Options("logan_status_dvpr", "statusID", "status")
                        .Validator(Validation.DbValues()))                    
                    .Field(new Field("logan_dvpr.estCompDate")
                        .GetFormatter(Format.DateSqlToFormat("MM/d/yyyy"))
                        .SetFormatter(Format.DateFormatToSql("MM/d/yyyy")))                    
                    .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")
                        .Validator(Validation.DbValues()))
                    .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,
        CASE 
            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.

Column color when reload ajax

$
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 - https://drive.google.com/file/d/1uXXtXEIkoXw-u4MSZ4RY7WsOVcgyrD0D/view?usp=sharing
My full code - https://pastebin.com/iFUwRsV1

            "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;
                }
            }

HTML tags in the editor fields

$
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?

First attempt at using the Editor and Bubble

$
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/dataTables.select.min.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

Highlight an entry in row if contains pattern

$
0
0

Hi,
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!

Custom Functions in Editor

$
0
0

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.

Dov

Gridview write back table using c#

$
0
0

I would like to do something like this: https://editor.datatables.net/examples/extensions/excel.html
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?


Sorting without new ajax request possible?

$
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?

Not working - order table by price

$
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?

Thanks,
Jirka

Multiple DataTables in one page?

$
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: [
            {
                targets:[0,1,2,3,4,5],
                orderable: false,
                searchable: false
            }
        ]

    });

    var table2 = $('#table2').DataTable({
        paging: false,
        select: {
            style: 'single'
        },
        columnDefs: [
            {
                targets:[0,1,2,3],
                orderable: false,
                searchable: false
            }
        ]

    });

just #table1 is a DataTable..

hide and show column not working

$
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

hebrew export to excel

$
0
0

i have data with hebrew character
i cannot export it to excel:it's show wrong character;

any one resolve this problem?

Viewing all 79603 articles
Browse latest View live




Latest Images