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

Datatables PDF export - How to order for fix export ?

$
0
0

Hello,

I have two button PDF.
The first to export the table (with the sorting the user want) and an other one to export data with a specific order.

The problem is : how can i order data (asc or desc) just for one button ? I don't want to export data with basic order or the user order choice but with my own order.

example : the table is order like this at the beginning :

                            >  var table = $('#example1').DataTable( {

"scrollX": true,
"responsive": false,
"order": [[0,"desc"]],
autoWidth: true,
dom: 'lf<"floatright"B>rtip',
buttons: [
{
extend: 'pdfHtml5',
text: 'PDF',
orientation: 'landscape',
title: 'Trials',
},
{
second pdf button...
}
....

Is it possible to specify in the button a special order like : "order": [[0,"desc"]], ?


Editor, multi-column searching, single button search trigger

$
0
0

Using editor server-side processing with multi-column searching https://datatables.net/examples/api/multi_filter.html. Dealing with a rediculous database (~14 billion rows, yes, that's a 'B'). Already made changes to the backend scripts to speed up processing (ie., instead of count(*), use system tables to pull row counts, or look directly at parition data versus table scans, etc). Currently trying to trigger a search via a button click, versus changes in input data.

I've disabled the listeners for change/click/keyup on the input fields, no problem. I've found countless examples of how people have done this, but for whatever reason it doesn't add up. I've tried ...

$.fn.dataTable.ext.buttons.search = {
  text: 'Search',
  action: function ( ) {
  }
};

var table = $('#default').DataTable( {
  buttons: [
    'search'
  ]
} );

But it doesn't seem like $(this) or var table actually makes it to the function call of the button itself. If I try to define the function as a loop through table.columns(), it doesn't understand the draw function, which is why it makes me think I'm expecting it to know something it doesnt.

I've tried a number of other methods that seem to focus on the global filter, which is obviously only one box versus multiple. Can I get a hint?

how to add 'title' attribute to 'copy', 'excel', 'previous' and 'next' buttons for 508 compliance

$
0
0

I use datatable with 'copy', 'excel', 'print' buttons. How to add 'title' attribute to all buttons (including 'previous', '1', '2', ...'next' buttons of pagination) for 508. Below is my code:

$('#results').DataTable({
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'print']
});

Thank you so much in advance!

How to `vertical-align:middle` content inside td and th

$
0
0

(Mainly for small screens displays..)
The content text isn't in the middle of the cells

TDs are set by css to:

.table td, .table th {
    padding: 1rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

and THs to:

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

I have currently set this to solve it:

#datatable{

    td, th {
        vertical-align: middle;
    }
}

And I was wondering if there is a better way to do this via datatable js settings...

Ajax and Json post method

$
0
0

hi y'all,

I've got a small problem regarding ajax and json.

I'm using the .toArray(); to get the selected row into an array, and making a ajax post to convert it from Javascript to PHP.

(javascript)

var rowArray = dt.rows({selected: true}).data().toArray();
rowArray = JSON.stringify(rowArray);

  $.ajax({
                                type: 'POST',
                                url: 'customer.php',
                                data: {rowArray}
                            });

(php)

                     $json = json_decode($_POST['rowArray']);

                                    $phparra = array();

                                foreach ($json as $value)    {

                                    $phparra[] = $value;  
                                                                           }

I use the data afterwards to pass it into a php function.

I do not know where the exact problem is, but I think it's the format of the array or the decode part.

If I replace the rowArray with a simple array like this:

(javascript)

var cars = ["Saab", "Volvo", "BMW", "asdasd", "123123"]; 
cars = JSON.stringify(cars);

  $.ajax({
                                type: 'POST',
                                url: 'customer.php',
                                data: {cars}
                            });

(php)

                     $json = json_decode($_POST['cars']);

                                    $phparra = array();

                                foreach ($json as $value)    {

                                    $phparra[] = $value;  
                                                                           }

it works perfecly and passes the data to the php function and so on.

I've attached the Form data for both.

(cars)

(rowArray)

Hope someone can help!

Compact table doesn't show all columns when screen too small

$
0
0

Hi,

I've been using DataTables in my project and I'm loving it so far. Unfortunately, I have a problem:

If my screen size is too small, the table will show a green + button to show the other columns. The last columns of my table are used as 'Actions' (Edit/Update/Delete) with an HTML icon so I don,t need to visualize the value inside this field (0):

I need it to look like this every time:

Any way to not let it resize? It causes a lot of problem for me. If by clicking the + button, it would show me my buttons and I can click on them, it would also work. Probably even better since the data would not be shrinked

Browser Issue for On-click

$
0
0

Hi,

On our Enterprise application we are facing a issue on IE.11, we are using data-table inline-editor for tables in that we are using on click event, after submit of edited fields we are facing this issue.

Usage:
when user clicks on outside of the table after editing the exiting fields in table.

Current Behavior: In our table we are using date picker(type : 'datetime') for our requirement, In IE browser after updating the exciting date to new date then click out side and trying to update another field its not working, its completely freezes the section until we click out side one more time.

Expected Behavior: we are expecting on first-click it should work as normal, its should not freeze

"keys" : {
"columns" : ".inlineEditable",
"keys" : [ 9 ], // 9 = tab
"editor" : _taskEditor,
"editOnFocus" : true
},

inline : {
onBlur : 'submit'
}

Please give us suggestion on this, Thanks

Greetings,

Pranesh Pamulapati

Editor: Copy data from one row and paste in multiple rows

$
0
0

Hello friends,
I have the following Products table. Is there a feature in Editor that with it i be able to update value of the attribute columns of P2 and P3 to be same as P1?

Thanks,
Alan


Error datatables requested unknown parameter for row X, column Y when hiding multiple columns

$
0
0

Hi I'm working with a datatable that haves a button which hides a group of columns, i'm also using the responsive extension of datatables, for recalculate the columns width when this changes, the button uses the buttons extension and is defined like this:

{
         extend: 'colvisGroup',
         text: '<b>HIDE MOST</b>',
         hide: function hide(colIdx) {
                  return datatablesMinDisplayColumns.indexOf(colIdx) < 0;
          }
}

datatablesMinDisplayColumns is an array of columns that i will not hide.

The column has a render method, which handles the data null exception, as u can see:

                'render': function (data, type, row) {
                    if (!data)
                        return '<a target="_blank" href="/url">+</a>';
                    else
                        return '<a class="anonymous" href="' + data + '" target="_blank">URL</a>' ;
                }

The problem is when load page if i hit this button the first time will throw this error : datatables requested unknown parameter for row X, column Y pointing to the column with this render method. Then everything will work fine if i hit for the second time. I managed to solve this issue by setting 'defaultContent': '' on this column. But this solution feels like redundant and a work around if i'm already handling this exception. So, i checked the render method doesn't get called when clicking the hide button. So my question is: There can be method trying to get data of a column without calling the render method? This could be related to the responsive plugin i'm using?

how to handle data manipulation before display if using a child row table

$
0
0

I have created an attendance system to replace an old system written in Delphi.

As can be seen the table divs are name and 13 checkboxes

The system loads (from a Joined Select) the name (edited on image as it shows real children's names) and checkboxes for attendance. The checkbox data is held as a string that is exploded to an array to check, or not/uncheck the checkboxes.

The PHP code I am using at present for the checkboxes is:

$checked = array();
$attendences = explode(",",$g_fetch['attend']);
for ($x = 0; $x <= 12; $x++) {
  if ($attendences[$x]!="0") {
    $checked[$x] = 'checked = "checked"';
    }
    else { $checked[$x] = '';
    }
 }    

Then as the table is filled:

 for ($y = 0; $y <= 12; $y++) {
      echo '<td align="center"><input type="checkbox"  value = "" '.$checked[$y].'></td>';
 }

Now I have been asked to modify the page so it shows extra details (e.g. emergency contact details, medical info) . I thought the example system used on the opening page of the DataTables site, with the child rows that open when an icon is clicked, would be a good start (which is why I have added the icons on the left of the rows in the image above)

However I am at a loss how to pass the row data to check/uncheck the checkboxes.

Is this possible, or would I be better going with a Bootstrap modal (which I don't really want to do, as I am already using a modal to allow class notes to be entered from the button above the table)

Many thanks for any help

Just starting

Using as an Attendee Register

$
0
0

Hi Guys,

Sorry, noob alert. Running through the Pusher Real-time Tables got me wondering about a application for my sons sports club. They meet for practice twice a week and each time someone has to produce a paper form to take some information of the attendee's. The data we collect is:-

{First Name} {Last Name} {Member} {Kit Hire} {Cost}

The 'Cost' depends on member status and 'Kit Hire'

Would it be possible to generate a table with current date inserted as an identifier, add new attendee (if necessary, like the example in the link above), then save the current table and be able to retrieve that data at a later time.

I hope that makes sense. It would basically be like save the paper forms but obviously online.

Thanks in advance.

[EXPORT] Huge performance issue since 1.10.17

$
0
0

Hey Allan,

We had a discussion two years ago about an export performance issue when going from TableTools to Buttons, which you solved perfectly, so trying my luck again :)

When trying to update to the latest DT version, I observed a similar performance drop, that you can see here:
- With 1.10.16: 5 seconds to export
- With 1.10.19: 90 seconds to export

I tested on all the latest versions and it actually happens starting with 1.10.17. Again that kind of prevents updating to the latest version - do you have any idea why this is and how to solve it?

Thanks again for your amazing work!

Does the bootstrap4 checkbox also include a copy of PopperJS?

$
0
0

Popper is required for Bootstrap 4 Tooltips. Is the Bootstrap 4.1.1 included file the bundle with popperjs as well, or only the BootstrapJS?

colReorder clears data, causes warning

$
0
0

i have the basic setup below. i've stripped out as much irrelevant code as possible. the data for the table is defined by a javascript array (generated by php). some of the columns have empty strings for data. when i try to reorder any column, I get the datatables warning:

DataTables warning: table id={id} - Requested unknown parameter '{undefined}' for row {row-index}, column{column-index}`

i acknowledge the message, and then data is cleared from some of the columns or reset to defaultContent value. i suspect the issue has something to do with the empty string fields, but i need to be able to support empty string data. i've tried various combinations of the render and defaultContent attributes without luck. columnDefs doesnt seem to apply any settings to these columns.

any help on preventing the warning and preventing data being cleared is much appreciated

            $(document).ready(function(){
var dataSet = [["", "2", "test name", "", "", "", "2018-10-15 00:00:00", "fred", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "1", ""," ", ""],["", "0", "", "", "", "2018-10-15 00:00:00", "2018-10-15 00:00:00", "", "", "", "", "", "", "", "", "", "", "0", "", "", "", "", "", "2018-10-15 00:00:00", "", "", "", "", "", "", "", "3", "3", ""," 1", "0"],];

    var table = $('table').DataTable({
  data: dataSet,
        columns: [          

            { title: "Event Time",data: 6,orderable:false,},
            { title: "Rule Name", className: 'none',data: 2, },
            { title: "Rule Description",data: 4,className: 'none',},
            { title: "Path",data: 9,},
            { title: "AffectedObject",data: 11,},
            { title: "ActingObject",data: 7, },
            { title: "FileServerDomain",data: 9,},
            { title: "DeviceIPAddress",data: 14,defaultContent: "na"},
            { title: "AlertID",data: 32,className:'none',},
            { title: "Acknowledged",data: 34,},
            { title: "EmailSent",data: 35,},

        ],

        colReorder: true,
    });
});

By default, display table empty unless a filter on the data returns matches ... How do I do it?

$
0
0

Greetings, I want to ask you about a behavior that they asked me exclusively to achieve with the DataTables that I do not find how to achieve it.
In my scenario, I retrieve data from a server (node ​​js) that returns data in json format and I have it paged from the DataTables configuration.
But I was asked that the default listing does not show any rows unless a filter is written that has matching results. How I do this?

I'm not sure, but is it possible that the datatables have already downloaded all the records before showing them?

My Config tiene:
bLengthChange: true,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Todas"]],
pagingType: "first_last_numbers",
pageLength: 5,
data: dataSet,
ajax: "/reservas/json/",
sAjaxDataProp: "datos.reservas",

Editor: Duplicate button not working

$
0
0

Hello friends,
I ran the editors samples application and the Duplicate button in it works perfectly. However, I tried to replicate the code in my application, all buttons work except the Duplicate button. The only difference I can think of between my application and editor's samples application is that I'm trying to duplicate row from only one table, but the samples application has a join function in it involving two tables.

The other thing I noticed "e, dt, node, config" in my application are shown grey, but in the samples application which works perfectly those are white. should I configure "e, dt, node, config" somewhere?

Thanks so much!
Alan

Server-side processing - is it possible to send data as JSON instead of URL params?

$
0
0

Out of the box, it looks like server-side processing will generate ajax calls that may look like this:
?draw=1&columns[0][data]=someColumnXYZ&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false

I'm interested in whether this information can be sent as JSON instead for easier processing on server side. For reference, I am looking to process these with a Java backend (Spring MVC). Having to parse this information manually seems quite inelegant. Is there a better way?

Ajax Example with JSON

$
0
0

I am trying to follow the AJAX example, though my data is all JSON

Data:

{ "personOne": { "username": "personOne", "systemA": "true", "systemB": "true" }, "personTwo": { "username": "personTwo", "systemA": "true", "systemC": "true" } }

My HTML is very simple:

    <script>
        $(document).ready(function() {
            $('#hubUserTable').DataTable( {
                "dom": '<"top"lif>rt<"bottom"Bp><"clear">',
                "buttons": [
                    'copy', 'csv', 'excel', 'print'
                ],
                "scrollX": true,
                "pagingType": "numbers",
                "processing": true,
                        
                "nowrap": true,
                "ajax": 'datatable_access.php'
            } );
        } );

    </script>

However, I dont get any data, and I do get a error

TypeError: e[i] is undefined[Learn More] jquery.dataTables.min.js:65:437 

Any help please? There should be 4 columns. (however, notice each person does not have all columns).

If it helps, my data within the 'datatable_access.php' is an array as $myData[[]], that I do a echo json_encode on to output, so I can put it in a different format if thats easier.

prevent automatic shrinking

$
0
0

How to prevent automatic shrinking when the number of columns is large?

Viewing all 82208 articles
Browse latest View live


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