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

ScrollY: misaligned table headers with bootstrap

$
0
0

With ScrollY enabled, our table headers are misaligned (too narrow). We have multiple tables but only the first has correct alignment while the others do not. Clicking a table header (to sort by column) causes the header for that table to resize correctly.

I've seen related issues but cannot resolve, and another user reported a similar issue (and includes a functional example that demonstrates the problem) although they use a bootstrap modal. Click their modal to see what I see:

https://datatables.net//forums/discussion/37108

I also use bootstrap and think it's related. Disabling ScrollY solves the alignment problem.

Related settings: "scrollY": '50vh', "scrollX": true, "scrollCollapse": true,


How to include DataTables in a Aurelia component?

$
0
0

Hi
I have an Aurelia project with several components and I would like to adda DataTables in one of then but I don't know how to add the references to the js and css files needed. I have installed the Core and the extensions with npm and I have in the node_modules all the folders with the files but wen I use
<template>
<require from="./../../node_modules/datatables.net/js/jquery.dataTables.min.js"></require>
the page gets me an error: aurelia-logging-console.js?dc89:47 ERROR [app-router] Error: Unable to find module with ID: datatables.net/js/jquery.dataTables.min.js

Any idea please?

regards

searching a column containing an array of objects

$
0
0

I'm having trouble finding a way to implement this use case, and I'm hoping someone here can point me in the right direction.

Suppose you want to display a datatable of family members to plan a reunion. The columns might be things like ID, First Name, Last Name, Address, RSVP'd, etc. If one of your family members has more than one address, then the Address column is actually an array of objects, each object being one address. Now each Address object would have a property for parking spaces. The issue I'm having is this: if you wanted to determine the best place to have the reunion, say by looking at who has the most parking available, you would search that column for addresses with 10 parking spaces.

To clarify, here is an example of one row in the table:

{
    id: 1,
    firstName: "John",
    lastName: "Doe",
    address: [
        {
            city: "Chicago",
            state: "Illinois",
            parking: 0
        }, {
            city: "Miami",
            state: "Florida",
            parking: 2
        }
    ],
    rsvp: true
}

In my use case, the Address column would actually be hidden, but what is important is that I can search the column for a property of more than one object in an array.

If this was unclear I would be more than happy to explain myself

Create sub dataTables on page 2.

$
0
0

I have a dataTable with childrows. On each child row i create a dataTables. I can expand and show the childrows on everypage. The sub-datatables are only created on the current page however. When I go to another page, the subtables aren't displayed. It appears as though the child row exists but no sub-dataTable has been created. If I collapse and then expand the childrow the dataTable is created.

Here is my fiddle that I forked https://jsfiddle.net/jsfiddlertwo/8rmq3foy/

Here is the expand button function

$('#btn-show-all-children').on('click', function(){
    // Enumerate all rows
    table.rows().every(function(){
        // If row has details collapsed
        if(!this.child.isShown()){
            // Open this row
            this.child(format(this.data())).show();
            childTable(this.data());
            $(this.node()).addClass('shown');
        }
    });
}); 

My format function creates the html for the sub-dataTable

function format ( d ) {
    var childId = d.extn;
  return '<div><table id=\'child-table' + childId + '\' class=\'table-striped table-bordered\'></table></div>';
}

The childTable function creates the sub-dataTable

var childTable = $(childId).DataTable({
    colReorder: true,
    searching: false,
    info: false,
    paging: false,
    scrollY: false,
    data: data.children,
    columns: [{
        title: "Name",
        render: function(data, type, row, meta) {
          return row.name;
        }
      },
      {
        title: "Class",
        render: function(data, type, row, meta) {
          return row.class;
        }
      },
    ]
    });
}

The expand button expands and shows the sub-dataTables on the current page. The trouble is that when I go to another page, the sub-dataTables aren't there. Once on another page I can click on the row twice (to collapse and then re-expand) and the sub-dataTables are created. I've tried using the drawcallback but it is called before the new page is created.

How can I make the sub-dataTables be created on all pages?

Datatable did not recognize click function on tr or td in second, third, fourth (and so on) page

$
0
0

i'm using Bootstrap 4 and Datatable 1.10.19.

i have a datatable where user can click on a td and modal will appear with that specific information (based on what td they clicked).
only first page of the datatable showing the information of the clicked td; the rest of the page did not.

i tried to run a little test to see if click function being called if i click the td; apparently the click function only called if i click the td in the first page and it's not if i click the td on second and third page.

tried not to use Datatable and it's working fine; the click function is called when i click any td.

Mavenbuild error datatable: TypeError: 'undefined' is not a function (evaluating '$('#tableCol').D

$
0
0

When i run maven install i am unable to build it completely because it says javascript parse error: TypeError: 'undefined' is not a function (evaluating '$('#tableCol').D

You can see my jenkins build where u will find the error in detail. Use the below link:

http://build.devcenter.cerner.corp/job/ACADEM-36900/1/console

Also i just found out that my phantonjs driver is having a problem with data table and showing an error:

[ERROR - 2018-07-20T11:53:09.413Z] Session [7884b370-8c13-11e8-bab8-ed12f07c7ecc] - page.onError - msg: TypeError: 'undefined' is not a function (evaluating '$('#tableCol').DataTable()')

U can see the above error in the link. u will find out just above the separation " ----- BUILD FAILURE----"

This is an important issue as my project needs to completed by today. Can anyone solve this issue as soon as possible.

Thanks a ton in advance.

How to get the sum of the joined table with the Editor's php library

$
0
0

If I wrote what I wanted to do in a query, I would write it like this:

SELECT
  s.ID,
  SUM((sd.amount * sd.price)) AS orderTotal
FROM
  sales_order s
  LEFT JOIN sales_order_details sd
    ON s.ID = sd.orderID
GROUP BY s.ID

How do I do this with the Datatables Editor PHP libraries?

Kind regards,

Gloria

Append table TR TD and colReorder

$
0
0

Hi,

When user do a search I have a table append like this filled using Ajax, PHP and jQuery.
I'm also using State Save

var $tr = $('<tr>').append( 

       $('<td>').html(name),
       $('<td>').html(phone),
       $('<td>').html(date),

).appendTo('#my-list tbody');   

I'm looking for a way (if possible) to use colReorder
at the moment if user change the column order, the data follow the column, then if the user do a new search the column header stay at the new position but the content is rebuild as the original order.

Is there a way if the user change column order to get the value following the new order using append?

Thanks


Excel Export: Table Functionality

$
0
0

I am importing a table and would like to export it into an excel file in table format (ie format the data in the excel sheet as a table for table functionality, such as header, sorting, etc).

How do I go about this?

Thank you

Making datatable work faster for a MVC page getting records returned through ViewModel.

$
0
0

I have a Asp.Net Core MVC application and the page is getting the records via ViewModel. I'm looping through the records and have applied the datatable to the table being created. When the number of records grow then the datatables perform miserably, sometimes even the page crashes. I'm doing some custom code while looping through the records, and not using the pure Ajax or Server side processing provided by datatables. Is there a way I could speed up the data display?

Re-producing the part of the code for more clarity below:

<

table id="ManageRequestsTable" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th onclick="SortOnHeader('0', this.className)">Request ID</th>
<th onclick="SortOnHeader('1', this.className)">Requester</th>
<th onclick="SortOnHeader('3', this.className)">Request Title</th>
<th onclick="SortOnHeader('5', this.className)">Request Type</th>
<th onclick="SortOnHeader('6', this.className)">Complexity</th>
<th onclick="SortOnHeader('7', this.className)">Status</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="color:#000;background:#77caf3">Request ID</th>
<th style="color:#000;background:#77caf3">Requester</th>
<th style="color:#000;background:#77caf3">Request Title</th>
<th style="color:#000;background:#77caf3">Request Type</th>
<th style="color:#000;background:#77caf3">Complexity</th>
<th style="color:#000;background:#77caf3">Status</th>
<th style="color:#000;background:#77caf3">Actions</th>
</tr>
</tfoot>
<tbody>
@for (var i = 0; i < Model.Requests.Count(); i++)
// binding the data coming through the model to the rows here

Editor datepicker min/max problem

$
0
0

Hi Allan.

I think I have found a bug in the recent Editor, here is the description/problem:

The followng lines evaluates if the maxDate is higher or not then next month, and then it uses this to display/hide next month button. The problem is that if we do not set a maxdate in option, maxdate is null which means it will always evaluate to true and you never see a next month button. Even Editors Example page suffer from this.

    var overMax = maxDate < new Date( Date.UTC(year, month+1, 1, 0, 0, 0 ) );

    this.dom.title.find('div.'+classPrefix+'-iconLeft')
        .css( 'display', underMin ? 'none' : 'block' );

    this.dom.title.find('div.'+classPrefix+'-iconRight')
        .css( 'display', overMax ? 'none' : 'block' );

I have quickly fixed it like this:

    var overMax = maxDate < new Date( Date.UTC(year, month+1, 1, 0, 0, 0 ) );
        if (maxDate === null)
            overMax=false;

A second problem I have found is that underMin is evaluated like this:

    var underMin = minDate > new Date( Date.UTC(year, month-1, 1, 0, 0, 0 ) );

But, this will result in comparing the min date with the first date of previous month, which means that when you are on the next month compared to the minDate the left arrow won't show. Example: Assuming the minimum date is set to: 2018-01-30 and today is 2018-01-31, when you open the datepicker and click right (to see February) the underMin will compare 2018-01-30 with 2017-12-01, which results in TRUE and therefore the right arrow will be hidden. I think the correct way of evaluating the underMin variable should be like this:

         var underMin = minDate > new Date( Date.UTC(year, month, 1, 0, 0, 0 ) ); 

Hope it makes sense.

Changing dataTables_scrollBody overflow

$
0
0

I am trying to change the style of this div to have 'overflow: visible;". But since it has in line styles it is impossible for me to override it. Is there any way to change this in the table settings or to actually override it? Thanks.

Handling null Values

$
0
0

Hi All

I have a serialized json string like this.

[[null,null,null,null,null],[null,"Rough Costing",null,null,null],[null,null,null,null,null],[null,"Client","Ua Limited",null,null],[null,"Product",null,null,null],[null,"Pro: Name","Idam ",null,null],[null,"Est.: No",null,null,null],[null,"Time: period  ","43299",null,null],[null,"Date","15th July - 2018",null,null],[null,null,null,null,null]] 

this was a json conversion of csv file generated from a excel invoice file and my aim is to load the csv to datatable and let the users to get rid of the unwanted rows containing headings and section names and save the values to db.

but as you can see this string contains lots of nulls and no column names. and the table is in loading mode and cant see any relevant jquery error.

is this array valid for datatables with null values. is there any specific way to load this?

now im here but no much different even without column definitions.

`$(document).ready(function () {
     $('#example').DataTable({
            dom: "Bfrtip",
            ajax: "/POPM_Trn_IOU/ExportToExcel",
            "columns": [
                {
                    "data": 0, 
                    "defaultContent": ""
                },
                {
                    "data": 1, 
                    "defaultContent": ""
                },
                {
                    "data": 2,
                    "defaultContent": ""
                },
                {
                    "data": 3, 
                    "defaultContent": ""
                },
                {
                    "data": 4, 
                    "defaultContent": ""
                }
            ],
            dataSrc: ""  
            
    });  
    });

Thank You

Support for callbacks and async handling of buttons.exportData()

$
0
0

The current implementation of the export buttons is limited with regards to server side processing (basically, there is no option to handle exporting all data client side).

I have a couple of ideas how to do this and already implemented a version by registering a custom "buttons.exportData()" which does support loading the additional data from the server, but it however must use "async: false" since buttons.exportData() is a synchronous function.

Would it be possible to somehow change this behaviour to support async callbacks instead of synchronous returns (would also help when exporting large datasets since the current (regular) exportData() functionality can then use setTimeout and chunk it's parsing instead of the current fully synchronous implementation).

In addition to the async callbacks it would also be nice to support some sort of "data.header", "data.body", "data.footer" callbacks that (if set) replaces the current logic with regards to fetching this information and allows for the developer to implement custom filtering and/or (like in this case) ajax fetching the data from his server.

Sorting columns do not show personnalized background colors of row

$
0
0

Hi,
In my use of Datatables, i added personnalized color for each row depending on the value of a colum in the row.
I use createdRow to do the change in backgroundColor
Everything is ok excepted when i sort rows using column headers, the sorting columns do not apply the color of rows and use only grey patterns defined in css.

Here is the code for the backgroundColor:
//--- Datatables : Personnalisation des couleurs une fois l'affichage réalisé
createdRow : function(row, data, index) {
//--- Mise en évidence des relances cloturées dérogées ou annulées
if ((data[24] == "X") || (data[24] == "C")
|| (data[24] == "V")) {
$(row).css('background-color', '#DDDDFF');
$(row).css('font-style', 'italic');
} else
//--- Mise en évidence des relances sans date de disponibilité
if (data[25] == "") {
$(row).css('background-color', '#FEFFBF');
} else
//--- Mise en évidence des relances en retard
if (parseInt(data[48]) <= 0) {
$(row).css('background-color', '#FEBFBF');
}

Any idea to solve my problem ? (i searched in the forum with no success)
Thx a lot
Groqik


Excel Export: format cells as text

$
0
0

When I export the data into the excel file, it will import data ( I am forcing the data to type "string" via columnDefs: [ {type:'string', targets: '_all'}, [...] } ) correctly so if there are numbers with leading zeroes, it seems to keep them as strings; however, if there is a number of type string with no leading zeroes, excel will read display the value in a cell of format "Number".

My question is if there is a way, when extending button 'excelHtml5', to force format the excel cells to type "text"?

Thank you

PDF Export a Table in a Table

$
0
0

I need a PDF export of an datatable that have an table in a cell. I try to do this with the following code:

dtButtons.push( {
                extend: 'pdfHtml5',
                text: '<i class="fas fa-file-pdf text-red fa-fw"></i>',
                customize: function( doc ) {
                    var name = mt_fee.column(1).data().toArray();
                    var sex = mt_fee.column(2).data().toArray();
                    var yob = mt_fee.column(3).data().toArray();
                    var events = mt_fee.column(4).data().toArray();
                    var events_lenght = events.length;
                    var rows = [];
                    var entries = [];
                    var ent = [];
                    
                    for( var i = 0; i < events.length; i++ ) {
                        var subtablerows = ( 0 == events[i].length % 2 ) ? Math.floor( events[i].length / 2 >> 0 ) : Math.floor( events[i].length / 2 >> 0 ) + 1;
                        var row_remainer = events[i].length % 2;
                        var entriesnr = events[i].length;
                        var nr0 = 0;
                        var nr1 = 1;
                        for( var j = 0; j < ( subtablerows - 1 ); j++ ) {
                            if( 'undefined' !== events[i][nr0].distance && 'undefined' !== events[i][nr1].distance ) {
                                entries[j] = [
                                    events[i][nr0].distance + 'm ' + events[i][nr0].stroke + ' (' + events[i][nr0].eventNumber + ')',
                                    events[i][nr0].entrytime,
                                    events[i][nr1].distance + 'm ' + events[i][nr1].stroke + ' (' + events[i][nr1].eventNumber + ')',
                                    events[i][nr1].entrytime
                                ];
                            } else if( 'undefined' !== events[i][nr0].distance && 'undefined' === events[i][nr1].distance ) {
                                entries[j] = [
                                    events[i][nr0].distance + 'm ' + events[i][nr0].stroke + ' (' + events[i][nr0].eventNumber + ')',
                                    events[i][nr0].entrytime,
                                    '',
                                    ''
                                ];
                            }
                            nr0++;
                            nr1++;
                        }
                        //console.log( entries );
                        ent[i] = [ {
                            table: {
                                body: entries
                            }
                        } ];
                        console.log( ent[i] );
                        rows[i] = [ name[i], ( 'FEMALE' == sex[i] ) ? 'F' : 'M', yob[i], [ ent[i] ] ];
                    }
                    console.log(rows);
                    var objMain = {
                        table: {
                            body: [
                                rows
                            ]
                        }
                    };
                    
                    doc.content[1].table.body = rows;
                }

            } );

My problem is, only one table object are include in one cell and it is the wrong one. in the oder cells i see empty tables. I have attached a result file that you can see my problem. Any Idea where my fault ist?

Andreas

Change background color if button is currently active

$
0
0

I added custom buttons to filter my list, is there a way to change the background color of the button associated with the current filter? With the following code, if user clicks on 'A' button, I want that button to display in different background color and then revert if another button is clicked?

dataTableExample = $('#tableAcronyms').DataTable({
            "pageLength": 25, //number of rows to display per page
            "searching": true,
            "order":[0, "asc"], 
            "paging": true, 
            "info": true, 
            "dom": "Bfrtip",
            "buttons": [
                {
                    "text": "A",
                    "action": function (e, dt, node, config) {
                        regExSearch = '^' + 'A';
                        dt.column(0).search(regExSearch, true, false).draw();
                    }
                },
                {
                    "text": "B", 
                    "action": function (e, dt, node, config) {
                        regExSearch = '^' + 'B';
                        dt.column(0).search(regExSearch, true, false).draw();
                    }
                },

Nested Tables

$
0
0

I searched and found many questions regarding this topic. But not a solution I am looking for. My question is same as this: https://www.datatables.net/forums/discussion/30379 .
I have a dataTable with some rows. If user clicks on a row, that row should expand out and display a table within. Something like the "Accordion" effect in bootstrap. Any ideas from experts here how to achieve this functionality? Appreciate your inputs,

Regards,
Harsha

Search Field Alignment Bug

$
0
0

Hi there,

I am using your great module and found a bug recently! Namely, I am trying to place DataTable within modal dialog and found out that "Search" field is misaligned there.

Could you kindly help to correct this bug?

Here is a screenshot of it, you will see what do I mean. I corrected it during debug within Chrome browser by placing "dataTables_filter pull-right" option, but how can I correct in my sources?

And you can see there, that pagination links also are misaligned!

Viewing all 82536 articles
Browse latest View live


Latest Images

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