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

Count rows depending on a criteria

$
0
0

Hi,

I want to count the rows of a column, but only count if matches the criteria.

For example, we have that drawed table:

Name-Hired

James-Yes
Olivia-Yes
Paul-No
Sonya-Yes
Donna-No

The criteria is: Hired = Yes. And the result is Count = 3.

But I don't want draw anything, only count.

Thank you.


How can i reduce time to load data in table?

$
0
0

I have more 100000 data in my db and i use ajax data table . It takes too much time to load data .Please give me a suggestion for load data fast or in chunk

Multi Column sort and Custom Type fails to sort second column

$
0
0

I've come across an issue where datatables is failing to sort second column in a order when using a custom type

see: http://live.datatables.net/dirajulu/1/edit

When you press the "button" it shows the icon to indicate both columns are being sorted but the console output is not showing for the second columns sorting.

Repeated pressing it appears to be causing a asc/desc toggle to occur on the 2nd column?

How to format datetime retrieved from database using Editor

$
0
0

HI Everyone,

I have a field in a table of my datatabase that keeps track of the time the record is saved (it is a timestamp saved in this format: YYYY-MM-DD HH:mm:ss). That field is not in my form.

But I would like to display its values in my table in a specific format (DD-MM-YYYY HH:mm:ss). How can I go about it?

NB: I am using Editor
Thanks for your help.

Date Sorting for MM/DD/YYYY Failing

$
0
0

My page has a table that should initialize with the record create date in descending fashion. This was implemented the last quarter of 2017 but today I see that 01/02/2018 is being sorted as older than the December 2017 dates (attached screenshot). It is an Intranet site so I cannot offer a link to it.

I am using the plug in that should enable the sort [line 6 below in the code snippet])

                $.ajax(
                    {
                        data: { startDt: $('#startDt').val(), endDt: $('#endDt').val() },
                        datatype: 'json',
                        success: function (rosterData) {
                            $.fn.dataTable.moment('MM/DD/YYYY','en-US');
                            $('#tblRoster').DataTable({
                                data: JSON.parse(rosterData.firstChild.textContent),

The column that is being sorted has the following configuration:

                                columns: [
                                    {
                                        'data': 'CreatedDt' ,
                                        "type": "date ",
                                        "render": function (value) {
                                            if (value === null) return "";
                                            return window.moment(value).format('MM/DD/YYYY');
                                        }
                                    },

A snippet of the JSON being used as data for the table is also attached. Thanks for any insight as to why it seems to be sorting more in string than date fashion.

Misaligned rows in Fixed columns when scrolling Y

$
0
0

I used datatables fixed columns but on load my rows are not aligned. At first it was a tiny bit misaligned but as I scroll, the row misalignment becomes more and more misaligned.

On load this is what it looks like (note: the first two columns are the fixed columns)
1st photo
then if I scroll vertically at the bottom notice that the rows are not aligned at all
2nd photo

Modification of datetime dialog

$
0
0

Please modify the datetime dialog in a way that the dropbox is replaced in a way that the year is more flexibel.

For example like you can now scroll through the months with the left and right icon, except then by adding an extra left and right icon for the year. This will solve some inflexibility issues with the current dialog (limited with + and - 10 years).

datetime picker behind the editor dialog

$
0
0

Hi,

I have an issue with the datetime picker being positioned behind the editor dialog. Does anyone have an idea what css I need to edit?


Appearing icon when table is empty

$
0
0

Hello :) ,
since i updated my FontAwesome version to 5.0.2 this icon occured when no data is available for the table This icon normally occurs when it can not be found. But i also not entered an icon for this text in any config file.
Has someone the same problem?

Thanks :)

Column width jumping when transitioning from fixed headers to non on first transition

$
0
0

Video link since hard to explain: https://photos.app.goo.gl/0Nvv2xAm9fa7r1NI2 Couldn't find a reference in the forums for my particular issue so making a new post.

I'm using the fixed headers extension with datables and an ajax data source. On the first load, the columns are sized correctly, and the header row is part of the table. When scrolling down, the header row correctly converts to a fixed header row. (offset by a custom amount). When scrolling back up to the point at which the fixed header transitions back into a table header, the columns widths appear to jump. I can't pinpoint any specific reason why this would be happening.

Created with following

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs/dt-1.10.16/af-2.2.2/b-1.5.0/b-colvis-1.5.0/b-html5-1.5.0/b-print-1.5.0/cr-1.4.1/fc-3.2.4/fh-3.1.3/r-2.2.1/rg-1.0.2/rr-1.2.3/sl-1.2.4
 *
 * Included libraries:
 *   DataTables 1.10.16, AutoFill 2.2.2, Buttons 1.5.0, Column visibility 1.5.0, HTML5 export 1.5.0, Print view 1.5.0, ColReorder 1.4.1, FixedColumns 3.2.4, FixedHeader 3.1.3, Responsive 2.2.1, RowGroup 1.0.2, RowReorder 1.2.3, Select 1.2.4
 */

/*! DataTables 1.10.16
 * ©2008-2017 SpryMedia Ltd - datatables.net/license
 */

Datatables Initialization - currently using

            'columns': [
                { data: 'productionDueDate', width: 100, 'class': 'production-due-date-cell' },
                { data: 'bookstem', 'class': 'title-information' },
                { data: null, orderable: false, width: 100 },
                { data: null, width: 100, orderable: false },
                { data: 'runTime', width: 100, orderable: false },
                { data: 'ipsShipDate', width: 100 },
                { data: null, width: 100, orderable: false },
                { data: 'hardcoverPublishDate', width: 100 },
                { data: null, width: 100, orderable: false }
            ],
//          'responsive': true,
            'lengthMenu': [ 10, 25, 50, 100, 200, 400 ],
            'order': [ 1, 'desc' ],
            'autoWidth': false,
            'processing': true,
            'serverSide': true,
            'searchDelay': 600,
            'stateSave': true,
            'paging': true,
            'fixedHeader': {
                'header': true,
                'headerOffset': 51
            },
            'ajax': function(data, callback, settings) {
                data = $.extend(data, {
                    productionDateFrom: TitleStatusView.dom.input_productionDateFrom.val(),
                    productionDateTo: TitleStatusView.dom.input_productionDateTo.val()
                });
                TitleStatusView.tableFilterParams = data;
                Tantor.ajaxWrapper({
                    data: data,
                    url: '/production/title-status/get-datatables',
                    success: function(response) {
                        callback(response)
                    }
                });
            },
            'createdRow': function(row, data, dataIndex) {
                            // change row stuff
            }

set a singular field when update a specific field

$
0
0

I would like that when I update de field 'perfil' the other field 'until_date' was setted by one year from now date. Is that possible?

checkBox with DataTable row Selection

$
0
0

Hi All,
I am struggling in introducing checkbox selection with angular data table. So I came across this example

https://datatables.net/extensions/select/examples/initialisation/checkbox

I want to know how I incorporate the above mentioned example when my column definition is not as simple as in the example.
I am defining my columns using DTColumnBuilder
****Following is the sample****
```$scope.dtColumnDefs = [

        DTColumnBuilder.newColumn(null).withClass().withTitle(name) .renderWith(function(data, type, full) {

       }),


        DTColumnBuilder.newColumn('template').withClass().withTitle(position).renderWith(function (data, type, full) {

        }),

        DTColumnBuilder.newColumn(null').withTitle(Age).renderWith(function (data, type, full) {

        }),

];```

And My index file look like this.

``` <div class="md-card uk-margin-medium-bottom" >
<div class="md-card-content" ng-controller="dt_individual_search as showCase">
<table id="table"

                   cellspacing="0"
                   datatable
                   dt-options="dtOptions"
                   dt-columns="dtColumnDefs"
                   dt-row-selection="2"
                   disable-buttons="[1]"
                   width="100%">
                <thead>
                <tr>
                 <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>```

So my question is now How I can include the className: 'select-checkbox', in my current codewith DTColumnBuilder?

[ Ask ] Displaying child objects

$
0
0

Hi all,
i have data returned from server as follows :

{
    "data": [
        {
            "name": "SU",
            "description": "Super User",
            "company_id": "system",
            "objects": [
                {
                    "id": "jyD1-zqI",
                    "label": "register-object",
                    "type": "form",
                    "description": "form register object"
                },
                {
                    "id": "Eg6sZMhI",
                    "label": "register-company",
                    "type": "form",
                    "description": "form register company"
                },
                {
                    "id": "_jtptOH8",
                    "label": "register-scope",
                    "type": "form",
                    "description": "form register scope or role"
                },
                {
                    "id": "u-hcugkc",
                    "label": "autorization",
                    "type": "api",
                    "description": "/auth/autorize"
                },
                {
                    "id": "dxdcvSv8",
                    "label": "register-user",
                    "type": "form",
                    "description": "form register user"
                }
            ]
        },
        {
            "name": "SU",
            "description": "Super User",
            "company_id": "system",
            "objects": [
                {
                    "id": "jyD1-zqI",
                    "label": "register-object",
                    "type": "form",
                    "description": "form register object"
                },
                {
                    "id": "Eg6sZMhI",
                    "label": "register-company",
                    "type": "form",
                    "description": "form register company"
                },
                {
                    "id": "_jtptOH8",
                    "label": "register-scope",
                    "type": "form",
                    "description": "form register scope or role"
                },
                {
                    "id": "u-hcugkc",
                    "label": "autorization",
                    "type": "api",
                    "description": "/auth/autorize"
                },
                {
                    "id": "dxdcvSv8",
                    "label": "register-user",
                    "type": "form",
                    "description": "form register user"
                }
            ]
        }
    ]
}

How can i display it as Row details ?

Thanks ~
Best Regards,
FR

use glyphicon-search inside search textbox

$
0
0

hello allan

please let me know how can i use datatable search box as like shown image below and how to use icon inside search box

regards
karthik.r

I have a datatable initialisation issue that break everything

$
0
0

hello, I'm about to have a breakdown trying to understand what's wrong here : http://live.datatables.net/diwarana/1/edit
I have a page with multiple datatable "reinitialisation".
everyone of them is working fine, exept for this particular one, that i can't figure out why.
if someone have a hint it will be verry welcome.
thanks


Checkbox selection with Bootstrap 4

$
0
0

Hi,
I am trying to get checkbox as below example:

https://datatables.net/extensions/select/examples/initialisation/checkbox

My snippet code:

<head>
    <title>getSelections</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="dataTables.bootstrap4.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="jquery.dataTables.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" ></script>
    <script src="dataTables.bootstrap4.min.js"></script>
</head>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="30%">
        <thead>
            <tr>
                <th></th>
                <th>Select Flows</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Tiger Nixon</td>
            </tr>
            <tr>
                <td></td>
                <td>Garrett Winters</td>
            </tr>
            <tr>
                <td></td>
                <td>Ashton Cox</td>
            </tr>
            </tbody>
    </table>

My jquery code:

$(document).ready(function() {
    $('#example').DataTable( {
        scrollY:        300,
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            leftColumns: 2
        },
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
             blurable: true,
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    } );
} );

But, Checkbox is not coming. Can anyone please help me for the same?

Im having Error after destroying DataTable

$
0
0

"Uncaught TypeError: Cannot read property 'length' of undefined " after i destroy() it. im using serverside datatable this is my sample code"

 load_customers(){

        if( typeof dt != 'undefined'){
        dt.destroy();
        dt.empty();
     }

    dt = $('#customers-table').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":  url+'customers/load_customers',
        "destroy" : true,
        "columns": [
            {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": "",
                "width": "5%"
            },
            { "data": 1},
            { "data": 2 },
            { "data": 3 },
            { "data": 4, "width": "5%" , bSortable: false},
            { "data": 5, "width": "20%" , bSortable: false}
        ],
        "order": [[1, 'DESC']]
    } );

}

Datatable - Editor : setting editOnfocus option posting data to server randomly

$
0
0

Hi,

We have to open the editor on focus but post data to server only when user makes some changes or type in the field. We are able to achieve this feature with **editOnFocus ** option but data is being posted randomly to server while only navigating the table and making no change.

We observed the same behavior on tabbed column example screen, on reaching the 3rd row it submit few next columns and rest works fine.

is there a way to add working html5 tag on createdRow

$
0
0

Hello,
I have data data I use coming from ajax in json format, it works fine but the json gives me dates in timestamp and I format them in upon createdRow which works fine, the problem is when I try to search it doesn't search for the value that I have formatted but for the one that comes from my json e.g. if I type 2017 no results are shown, but from part of the timestamp it shows it. I try adding data-search with the formatted date and it adds the attributes but no result are shown in search. Is there a solution for that?

Generator not working anymore?

$
0
0

Hello Allan,

I think something is wrong with the generator. I get an error message similar to https://datatables.net/forums/discussion/37793
Code CD1674. "Database": type used in the statement must be implicitly convertible to 'System.IDisposable'

Thank you in advance and also for the editor component!
Best regards,
Markus

Viewing all 81669 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>