If I have 500 records in a table,and each page contains 50 records 10 pages.If i search in first page results will come from all pages or that particular page ?? Quick reply please !

Good afternoon
I'm trying to create a search engine to be able to select a record within a custom editor: template: '#customForm',
The field I want to filter is:
<editor-field name = "tb_palabra []. id"> </ editor-field>
I would appreciate any surgency.
A greeting.

I know this has been asked before, but I haven't found a solution that works for me for the following reasons:
a) fixed table height solutions assume a scrolling rather than pagination approach - https://datatables.net/forums/discussion/26219 - I'd need to somehow work out the exact height I'd need to avoid scrolling in every page or a gap (plus using scrollY knocked my headers out of kilter with the columns in the tbodY)
b) solutions are for older legacy versions of datatables
c) trying to add extra empty table row elements didn't work (added in data from the start of the table)

So to cut a long story short, I took an approach from here --> https://datatables.net/forums/discussion/comment/43984/#Comment_43984

and changed it to set a margin-bottom on the last row's cells if necessary that keep a stable table height -->

"fnDrawCallback" : function (oSettings) {
                            var total_count = oSettings.fnRecordsTotal();
                            var show_num = oSettings._iDisplayLength;
                            var tbody = $(this).children('tbody');
                            var tr_count = tbody.children('tr').length;
                            var missing = show_num - tr_count;

                            // Wipe out any previously manually added margin-bottom values to the tables cells. This is done so
                            // a) we don't get rows with previously applied big margin bottoms appearing in the middle of the table making the table too big
                            // b) a row with a big margin bottoms isn't picked to calculate the row height which can throw the calculation waaayyy off course
                                // ('' removes the manual value and padding-bottom is recalculated from applicable css styles)
                            tbody.find("tr td").css ("padding-bottom", '');

                            if (show_num < total_count && missing > 0)     
                                // now we can safely pick up the height for a row and make an appropriate padding-bottom value for the last row's cells
                                // so table keeps the same height
                                var lastRowHeight = tbody.find('tr:last-child').height();
                                var lastRowCells = tbody.find('tr:last-child td');
                                var existingPadding = parseFloat (lastRowCells.css ("padding-bottom"));
                                //console.warn ("height", lastRowHeight, lastRowCells, existingPadding);
                                lastRowCells.css ("padding-bottom", (existingPadding + (lastRowHeight * missing))+"px");
                            }
                        }

It works on the latest chrome (v60), firefox (v54) and ie11

Also, sorry for adding this as a new discussion but all the relevant old discussions are marked 'closed' :-)

Edit: moved the "removing manual padding-bottom" bit so it always runs regardless of whether we're on the last page, otherwise you can get the row that was manually given the large padding-bottom value appearing on a full page (found this whilst filtering)

Ps. If anyone has a simpler solution, that'd be great too

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>

I have a lot of data that needs to be put in the datatable. The code was written long back that rewriting the code will be a huge task for me to add server side pagination.
So I had applied a filter 'Sub Brand' so that I can reduce the count of data coming in the UI.

The count of data reduced significantly by the ratio, but still there were 2088 data that needs to be populated in the datatable.
However, 2088 was still taking a time of almost 8-10 seconds.

I tried improving the SQL query so that I can just fetch whatever data I need for the particular page. Even though the query executed faster than before, the time taken for the UI to load is still the same, without any significant change.

Could you suggest me a solution for this, excluding server side pagination for now?
If there are no other solutions, that's the one I will probably have to go ahead with, but considering the time and testing it requires, I'm not really sure if my colleagues would suggest that way.

Thanks!

Hello, this is my table with 2 checkboxes: live.datatables.net/xasihece/1/edit

I'm trying to filter data in my table with these two checkboxes (will be more checkboxes and date-picker in the future). I'm using the php server_processing php and ssp.class.php. I found some comments about custom filtering in the ssp.class.php file, but there is no example how to do it and there is no example also in the DataTables forum or internet.

I know that I need to modify the WHERE conditoin in the ssp.class.php when checkbox is selected, but I'm completely lost how to do it. Thank you in advance.

When I export data from datatable it automatically convert big numbers like 1542658964667 into 1.54266E+12.

I've tried using $('row c[r^="A"]', sheet).attr( 's', '50' ) and $('row c[r^="A"]', sheet).attr( 's', '0' ) but none of those works.

Any Idea how to correctly represent big numbers as string when exporting to excel?

Hi!

Trying to get the row id, when user clicks enter in an input field on that row.
Changing the selectors do not help... Any suggestions on how to achieve this?

Current code just alerts undefined

$('#datatable tbody input').on( 'keyup change', function (ev) {

                    if (ev.keyCode == 13) {
                
                       alert( 'Row index: '+table.row( this ).id() );
                       return false;
                                     
                                   }
                } );

Thankful

Hi, I have set up column filters as per your example (https://datatables.net/manual/api#Example---column-filter) however I wish to have a button which clears all the filters. It clears them but the table is not redrawn. How can I achieve this?

Thanks in advance

Hi,

I'm having an issue
I have a lot of columns let say 15
I'm using responsive
I'm using savestate
When using the main search let say I search for John
Then I go to another page and get back, the result is ok and still there
Now if I clear the search field
Then the columns are not well aligned they are a little bit outside the template
If refresh the page this is ok.

This occurred only if I quit and get back and clear the search value.
It does not occurred if I don't quit the page.

The only solution I have for now is to reload the page on clear search
but I'm wondering if someone have encounter this and have a solution for this.

Hey guys (and girls),

i have a issue with table.row.add because its very slow with ~90k rows. My code:

table.clear(); 
$.each(data, function (index, element) {
  var tablerow = table.row.add([element.ID, element.Nr, element.Datum, element.Zeit, element.Total, element.Punkte]).node();
  /*$(tablerow).attr('data-id', element.ID);*/
});
table.draw();

json string (value of the data variable):

[{"ID":"123456789","Nr":"123456789","Bla":"123","BlaBla":"321","Datum":"1111-11-11","Zeit":"11:11:11.0000000","Blub":"11","Total":"11,11","Punkte":"11"},
{"ID":"123456789","Nr":"123456789","Bla":"123","BlaBla":"321","Datum":"1111-11-11","Zeit":"11:11:11.0000000","Blub":"11","Total":"11,11","Punkte":"11"}]

Code works with a few (some hundred) lines. But when i have 90k rows to add the browser freeze and it takes very long ~10 minutes to come back.

Anyone ideas?

Best wishes,
Daniel

Hello,
So I am working with an application in which a user enters a cohort name, along with a group name. Each cohort can hold multiple groups, which is linked in the database by a foreign key in the group table. I wan't to insert both the cohort name and group name in their respective tables. At the moment I only can get the cohort to insert and not the group. Is it possible to do this without making a separate file for it?

I use dataTable with date range filters based on yadcf. When user change webpage and come back to a webpage with filters there are still old filters values. I have created JS function to reset yadcf filters. Problem is that datatables fires an ajax and then this function is called.

My question is: how to call my function to change default filters values and then fire the ajax?

Is it possible to select portrait or landscape orientation of xlxs exported file (print preview) ??

thanks

I want to delete my account. How could i delete it?

Utlizing the API function myTable.init() I am able to retrieve most of what the original configuration settings of a table are.

but I've noticed .init() returns what ever the current sort order on the table is not the original sort order that the table was created with.

Where is the original story order stored.
Or do i need to grab it during table init and save it as it's own property.

Example

My Orginal dataTable Config object

{
        columns:moveReqCol,
        data: dataTableJSON,
        scrollX: true,
        stateSave: true,
        deferRender: true,
        colReorder: {realtime:false, fixedColumnsLeft:2},
        fixedColumns:   {
            leftColumns: 2
        },
        dom: 'Blfrtip',
        order: [[ 1, "desc" ]],
    }

notice i have 1 order set.

now, after setting an order on the table the .init() function returns.

{columns: Array(17), data: Array(87), scrollX: "100%", stateSave: true, deferRender: true, …}
aaData: (87) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
aaSorting: (4) [Array(2), Array(3), Array(3), Array(3)]
aoColumns: (17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
bDeferRender: true
bDestroy: true
bStateSave: true
buttons: ["test"]
colReorder: {realtime: false, fixedColumnsLeft: 2}
columns: (17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
data: (87) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
deferRender: true
destroy: true
dom: "Blfrtip"
drawCallback: ƒ ()
fixedColumns: {leftColumns: 2}
order: (4) [Array(2), Array(3), Array(3), Array(3)]
sDom: "Blfrtip"
sScrollX: "100%"
scrollX: "100%"
stateSave: true}

we can see that the order has updated to what ever i've currently set it to.

I've Attached a jsFiddle below that console logs what im talking about.

http://jsfiddle.net/3yxr2mv9/

Hi,

When I want to show a table field with accented data, I receive a JSON error
DataTables warning: table id=idtable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1.

If I just change the data column with non accented data all works.

Someone have an idea why accents make datatables stall?
Regards.
Diedeer

I am using ASPNET Core and my DateTime's are being serialized back like so: "2018-12-25T15:19:25.5594555"

I tried to use the field type of "date" but HTML5 does not know how to parse that and there is not an option to specify the input format yet.

I tried to use "datetime" (without jQuery UI) but the format does not seem to control the output of the initial set until a date is picked via the picker.

One solution is to use the AddJsonOptions IMvcCoreBuilder member to set MvcJsonOptions via something like this:
options.SerializerSettings.DateFormatString = "yyyy-MM-dd"; but I do not want to go messing with Core defaults and cause issues for other clients.

Ideally, DataTables would initialize the datetime field type with the format I specified. Also, I am aware this exists: https://datatables.net/plug-ins/sorting/datetime-moment but hopefully I am missing something simple and I dont have to pull this in and go updating all of my field definitions.

Is it possible to get selected row information when you use the edit button to open the editor dialog? I would like to customize the title of the dialog with information from the row; currently I do this thru click handlers:

$('#the-table tbody').on( 'click', 'tr td.cell-being-clicked', function () {    
  var rowId = $(this).closest('tr').find(".the-row-id").html();

  editor
    .title( 'Edit ' + rowId + ' Values')
    .buttons( 'Update' )
    .edit( $(this).closest('tr') );
});

If I can get row information I can use the open event instead to set the title for all editor dialog calls.

I need to show in footer the sum of the column.
But I need the sum of all records (serverside sum).
My backend is EDITOR class.