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

Server side data tables page length is not working

0
0

Hi,

I am facing issues of page Length is server side data table. it returns 36 recordsTotal and makes pagination page numbers perfect but it displays all records of 36 on the first page of pagination.

I have two pages having data tables, one is working fine and other is having this issue of pagelength but code is same for both.

i have tried to fix it but could not solve it.

,paging: true
,pageLength : 10

Thanks in advance if you could help me.


Datatable fixed header bug

0
0

I'm using the datatable in a SPA (single page application) web and it works fine in the first table (that uses the fixed header) from the system.

But when I go to other page that uses datatable, the page work fine, but on the bottom of the page you have a "fixed header" strange. Is it a datatable bug?

DataTable bug image

I'm using the scripts: DataTables 1.10.18, FixedColumns 3.2.5, FixedHeader 3.1.4, Responsive 2.2.2

How do I create a link that opens editor?

0
0

I would like to create a login link on a page simular to the Login/Register link on this site. When the link is clicked it should open editor so a user can enter there username and password. Can someone show me some working code?

Thank you

Column Visibility Button Issue In IE11 version 1.5.4

0
0

I noticed after updating to version 1.5.4 that the Column visibility dialog is being clipped. It's also not highlighting the buttons when clicked. This is working normally in Chrome, issue is in IE11.

Reverting to version 1.5.2 resolved the problem.

1.5.4:

1.5.2 :

508 Accessibility to a check box

0
0

I want to add 508 Accessibility to a check box. I have a select check box with user full name columns. How do I create the Ariel-label for the check box to have the name column information.

colReaorder: avoid order on th click

0
0

Hi, I've implemented colReaorder on a table but I've noticed that, when dragging a column, the orderable function gets executed too.

For what I can see, in this example the rows aren't being orderd after a column drag. I've checked the events assigned to the th through the console and there are no custom events on it. The only difference is that on my table, all the events shown are duplicated compared to the events I see in the example page:

Example page:

My page:

How can I find out what is causing this behaviour difference?

Multiple column server side filtering

0
0

Trying to switch from client to server side scripting - having trouble getting my multiple filters to work. Actually, I can't get one filter to work.

The code I have seems to work on the initial load, but changing the select filter has no effect. Here is my code, which you can find here: https://re.templeton.org/humility_poc/reconciliation_test1.html

  <script type="text/javascript">
  $(document).ready(function() {
      $('#pub_table').DataTable( {
        caseInsensitive: true,
        dom: 'lrtipB',
        processing: true,
        serverSide: true,
        ajax: {
          url: "reconcile_output_data.php",
          "type": "GET",
          "data": function(d) {
                 return $.extend( {}, d, {
                    "pub_table_col6_filter": $('#pub_table_col6_filter').val()
                  } );
          }
        },
        buttons: ['copy', 'excel'],
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            heightMatch: 'none'
        },
        "order": [[ 1, "desc" ]],
        "aoColumns": [
            { "orderSequence": [ "desc", "asc" ] },
            { "orderSequence": [ "desc", "asc" ] },
            { "orderSequence": [ "desc", "asc" ] },
            { "orderSequence": [ "desc", "asc" ] },
            { "orderSequence": [ "desc", "asc" ] },
            { "orderSequence": [ "desc", "asc" ] },
            { "orderSequence": [ "desc", "asc" ] },
            null,
            null,
        ],
        "columnDefs": [
            { targets: [7,8], visible: false},
            { targets: '_all', visible: true}
        ]

      } );

  });

    function filterColumn ( i ) {
//      $('#' + field_input_table).DataTable().column( i ).search($('#' + field_input_table + '_col'+i+'_filter').val(), 'on', 'on').draw();
      $('#pub_table').DataTable().draw();
    }

    $(document).ready(function() {
      $(".column_filter").change(function() {
        field_input_table = $(this).parents('div').attr('datatable');
        filterColumn( $(this).attr('col_filter_num') );
      } );
    } );

  </script>


<div id="pubfilterpanel" datatable="pub_table">
<table style="width:100%" >
<tbody>

<tr>
<td>Id:</td>
<td><input type="text" class="column_filter" id="pub_table_col0_filter" col_filter_num=0></td>
<td>&nbsp;</td>
<td>Project</td>
<td><select class="column_filter" id="pub_table_col8_filter" col_filter_num=8>
<option value="">All
<option value="^Humility Final">Humility Final
</select></td>
<td>&nbsp;</td>
<td>Year:</td>
<td><input type="text" id="pub_table_year_min" class="column_filter_minmax" size="2"> Min <input type="text" id="pub_table_year_max" class="column_filter_minmax" size="2"> Max</td>
</tr>

<tr>
<td>Publication Name:</td>
<td><input type="text" class="column_filter" id="pub_table_col2_filter" col_filter_num=2></td>
<td>&nbsp;</td>
<td>Agreement?</td>
<td><select class="column_filter" id="pub_table_col5_filter" col_filter_num=5>
<option value="">All
<option value="Yes">Yes
<option value="No">No
</select></td>
<td>&nbsp;</td>
<td>Number of Reviews</td>
<td><input type="text" id="pub_table_rev_min" class="column_filter_minmax" size="2"> Min <input type="text" id="pub_table_rev_max" class="column_filter_minmax" size="2"> Max</td>
</tr>

<tr>
<td>Publication Title:</td>
<td><input type="text" class="column_filter" id="pub_table_col3_filter" col_filter_num=3></td>
<td>&nbsp;</td>
<td>Final</td>
<td><select class="column_filter" id="pub_table_col6_filter" col_filter_num=6>
<option value="">All
<option value="Yes" selected>Yes
<option value="No">No
</select></td>
</tr>

<tr>
<td>Reviewer Name</td>
<td><input type="text" class="column_filter" id="pub_table_col7_filter" col_filter_num=7></td>
<td>&nbsp;</td>
</tr>


</tbody></table>
</div>
<p>

<table id="pub_table" class="stripe row-border order-column" style="width:100%" border=1 cellpadding=2 cellspacing=0>
 <thead>
  <tr>
    <th align=left>Id</th>
    <th align=left>Year</th>
    <th align=left>Name</th>
    <th align=left>Title</th>
    <th align=center>#Reviews</th>
    <th align=center>Agree?</th>
    <th align=center>Final?</th>
    <th align=center>Reviewers</th>
    <th align=center>Project</th>
   </tr>
 </thead>

</table>

Fixed column datatable.draw() is not working

0
0

I have applied fixed column to my table. I have two problem.

Problem 1:
Table ID and title attribute removed when I use fixed column and scrollX: true

Problem 2:

I created row in table. After save, I reload the table with updated value. when reloading datatable.draw() is not working


Prevent loading while scrolling

0
0

I have the code below, everything pretty much works, but the issue I'm running into:

When I get to record 25 in the scroll the AJAX call is executed again, causing the table to refresh. Currently it returns 87 records, which means 26-87 is never displayed.

The back end returns all the data when called, as such I can't page, nor can I handle lazy loading at record 26. How do I get the datatable to display/scroll through all 87 rows before executing the AJAX call?

    var recentPlatformTable;
    var api;
    var curRow = 0;
    var timer;

    $(document).ready(function () {
        recentPlatformTable = $('#recentPlatformTable').dataTable({
            lengthChange: false,
            iDisplayLength: -1,
            serverSide: true,
            ajax: {
                url: "/account/GetRecentPlatformBookings",
                contentType: 'application/json; charset=utf-8',
                type: "POST",
                data: function (data) {
                    curRow = 0;
                    setTimer();
                    return data = JSON.stringify(data);
                },
            },
            processing: true,
            paging: true,
            searching: false,
            sorting: false,
            "scrollY": "170px",
            "scrollCollapse": false,
            "ordering": false,
            deferRender: false,
            columns: [
                { "data": "ID" },
                {
                    "data": "HotelName",
                    render: function (data, type, row) {
                        return '<div style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis;width:100px;">' + data + '</div>';
                    }
                },
                {
                    "data": "HotelCity",
                    render: function (data, type, row) {
                        return '<div style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis;width:100px;">' + data + '</div>';
                    }
                },

                { "data": "HotelState" },
                { "data": "ReservationTotal" },
                { "data": "CustomerSavings" },
                { "data": "GrossProfit" },
                { "data": "EstimatedMatrixPayout" },
                { "data": "EstimatedTACPPayout" },
                { "data": "EstimatedCompanyShare" }
            ],
            responsive: false,
            info: false,
            scroller: true,
            "footerCallback": function (row, data, start, end, display) {
                api = this.api();
            },
        });

        $('.dataTables_paginate').hide();
        $('.dataTables_scrollFoot').hide();
        $('.dataTables_scrollBody').css('overflow', 'hidden');
    });

    function setTimer() {
        if (timer) {
            clearInterval(timer);
        }

        timer = setInterval(function () {
            if (api === undefined)
                return;

            var num_rows = api.page.info().recordsTotal;
            curRow += 1;
            console.log("*****row " + curRow + " of " + num_rows);

            if (curRow > num_rows) {
                console.log("*****Reloading");
                clearInterval(timer);
                recentPlatformTable.DataTable().ajax.reload();
            }
            else {
                api.settings().scroller().scrollToRow(curRow, 1000);
                console.log(api.rows({ page: 'current' }).data());
            }
        }, 1000);
    }

How to use row reorder in angular 6 application

0
0

Hi...I am new in this feild..can any one provide me a example of row reorder in angular 6

One column search not working in datatable.Please help me

Use TAB to submit and move to next cell DataTable Editor | Tab to submit | Use tab to submit inline

0
0

Hi guys!

Here is the scenario:
1. Use wants to use inline Editor
2. User wants to use TAB key to move around the table
3. User wants to submit data edited in the cell via TAB key.

Solution:

file: js/tables.yourprojectname.js

// when tab key is pressed  
    $('#yourtablename').on( 'keydown', 'tbody', function (e) {

        if(e.which == 9) {                   //TAB key                   
            e.preventDefault();           //Reset browser default; to preven TAB to select items outside your table.

            var $input = $('form input');
            $input.eq( $input.index( this ) + 1 ).focus();  //Moving to next cell

            table.keys.enable();
        }
   } );  

Hope this help!

Format datetime in the editor form

0
0

We need to convert a datetime field form ISO format to DD/MM/YYYY and back to ISO format when the edit are saved.
We have the following issues:
1) it seems that the format option does not convert at the first render of the edit form but only after the value has been edited
2) when the data are saved it seems there is not an option to convert back to ISO format

For in line edit, we do not have any issue because we use use a prorpietary render() function for type='display'

Realtime Editing without Web Socket | Socket.io | Real Time Editor | Auto Refresh inline real time

0
0

Hi guy!

With the help of Allan, I managed to find a workaround for real time effect on Datatables Editor.

It is not easy to integrate web socket with inline editing. Here is the concept for workaround:

  1. Use ajax.reload() - to refresh the table (without refreshing the page)
  2. Use setInterval() - to set frequency for auto refresh
  3. Use clearInterval() - to stop auto refresh only when editing in the cell

That will give you a real time experience to your clients!

Steps:

File: js/table.youTableName.js
1.

 //Auto Refresh (ajax.reload)
    var refreshTable = setInterval( function () {
        table.ajax.reload( null, false ); // user paging is not reset on reload
        table.keys.enable();  
    }, 3000 );  //3000 means 3 seconds; you cannot put 0 -> error

2.

    //   Activate an inline edit on click of a table cell
     $('#youTableName').on( 'keyup', 'tbody td:not(:first-child)', function (e) {
         clearInterval( refreshTable );
         table.keys.disable();
     });
        
    // Inline editing on tab focus
    $('#youTableName').on( 'keydown', 'tbody td:not(:first-child)', function (e) {
          
      clearInterval( refreshTable );
      table.keys.disable();

  });

  //   Activate an inline edit on click of a table cell
     $('#youTableName').on( 'click', 'tbody td:not(:first-child)', function (e) {
         editor.inline( this, {
             submitOnBlur: true
         });
         clearInterval( refreshTable );
         table.keys.enable();
     });

//Additional codes if you want to submit using TAB in inline editing
    // when tab key is pressed  
    $('#youTableName').on( 'keydown', 'tbody', function (e) {
        if(e.which == 9) {                                      
            e.preventDefault();
            var $input = $('form input');
            $input.eq( $input.index( this ) + 1 ).focus();
            table.keys.enable();
        }
   } );

Row expand/collapse is not working

0
0

Hello Team,
I have created a datatable using bootstrap theme and data is getting fetched from SharePoint list.
I wanted to have a expand/collapse feature on row and tried with code:
$(document).ready(function() {
loadMyItems();//used to fetch data
addClickEvent();// for adding click events
});

function addClickEvent()
{
$('#eDashboard tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );

}

Name Project Owner Status Scope status Cost status Schedule status Next Key Checkpoint Next Key Checkpoint Date

I am able to the click icon but it is not displaying child data.


I want to populate data in DataTable on a button click by default the table should show no data.

0
0

_I am using NodeJs _

home.js

$(document).ready(function() { Table = $('#ctsdataTable').DataTable( { "ajax": "js/data.txt", "columns": [ {"data": "session_date"}, {"data": "session_number"}, {"data": "r_session_number"}, {"data": "account"}, {"data": "amount"}, {"data": "check_number"}, {"data": "tran_code"}, {"data": "isn"} ] }); });

home.ejs

`<button id="SearchButton" class="btn btn-info">Search</button>

Session Date Session No. R_Session No. Account Amount Check No. Tran Code ISN
Session Date Session No. R_Session No. Account Amount Check No. Tran Code ISN

`

Issue with ColVis + colReorder + hidden column

0
0

Hi !
I think I identified a bug that has to do with colvis combined with the colReorder option.

Please run this jsfiddle: https://jsfiddle.net/KarloX2/b9zcwueg/

Run and do this:
* Notice that the column "B" is initially hidden (visible: false)
* Drag&Drop the header of column "A" to the right of column "C", so the table now shows the column order "C" + "A" + "D"
* Click the "Column visibility" button so it opens the the dropdown. (Notice that the order of the buttons has become adjusted just fine.)
* Here's the bug: Click the button "C" to hide that column and observe that this made column "B" become visible instead !!
* Other buttons in the "Column visibility" dropdown will cause a wrong action as well.

Any idea how I could try to fix this?

Thanks!

plug lokijs with datatables

0
0

Hi Guys,
I am trying to integrate the base in json format of lokijs with datatables but it does not work you have an idea on how to do it?
json data are not really identical to datatables

thanks for your help

server side processing stuck at "processing" after ordering

0
0

Hi guys,
I have a problem with datatable, server-side processing.
I have a lot of data, so server-side processing is needed to display them properly.
The first rendering of the datatable is ok, but when I try to change order by column I'm stuck at "processing", sever side call is done properly, data are returned, but nothing happens on the already displayed table.

This is my code, any help?

$('#tbl_orders').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "ajax.php?act=Orders&method=GetOrders"
                , "contentType": "application/json; charset=utf-8"
                , "dataType": 'json'
                , "dataSrc": function ( json ) {
                    json.draw = json.data.draw;
                    json.recordsTotal = json.data.recordsTotal;
                    json.recordsFiltered = json.data.recordsFiltered;
                    return json.data.data;
                }
                , "dataFilter": function(reps) {
                    return reps;
                }, "error":function(err){
                    console.log(err);
                }
            }
            , "order": [[ 1, "desc" ]]
            , "columns": [
                {
                    "data": "ch"
                    , 'name': 'channel'
                    , "render": function ( data, type, row, meta ) {
                        return data;
                    }
                }
                , {
                    "data": "dp"
                    , 'name': 'date_purchased'
                }
                , {
                    "data": "oId"
                    , 'name': 'order_id'
                }
                , {
                    "data": "sn"
                    , 'name': 'shipping_name'
                }
                , {
                    "data": "pr"
                    , 'name': 'products'
                    , "render": function ( data, type, row, meta ) {
                        return data;
                    }
                }
                , {
                    "data": "st"
                    , 'name': 'order_status'
                    , "render": function ( data, type, row, meta ) {
                        return data;
                    }
                }
                , {
                    "data": "sch"
                    , 'name': 'email_scheduled'
                    , "render": function ( data, type, row, meta ) {
                        return data;
                    }
                }
            ]
            , "colReorder": true
        });

Thank you

ColReorder 1.5.4 and colvis error

0
0

Hello,

When I use DataTable with colreorder 1.5.4 and colvis, columns showed in colvis buttons is not correctly ordered.

The jsfiddle show my problem : http://jsfiddle.net/yh0gsep9/

And this pucture :

Thanks,

Charly

Viewing all 79329 articles
Browse latest View live




Latest Images