Hello,

After my DataTable loads, the formatting seems to be messed up.

The table headers are of much shorter length than the data in the rows of the columns.

After I click on one of the headers, all headers get set to required length.

Thanks,

I'm attempting to implement a date picker that will narrow down a set of data. For testing purposes when I load the page everything works perfectly. When I pick a different date the goal is to reload the table with the start and end dates from the date picker, but the Search button/function fails to reload the table.

JS:

$start_date = '12/27/2019';
$end_date = '12/27/2019';
$is_date_search = 'yes';

(function($){

$(document).ready(function() {
                var table = $('#table_ordersByDay').DataTable( {

                        dom: 'Brtip',
                                "ajax":{
                                        url:"php/table.date_ordersByDay.php",
                                        type:"POST",
                                        data:{is_date_search:$is_date_search, start_date:$start_date, end_date:$end_date}
                                },
                        columns: [
                                {
                                        "data": "orders.status"
                                },
                                {
                                        "data": "orders.arrivalDateTime"
                                },
                                {
                                        "data": "orders.studyDescription"
                                }
                        ],
                        "order": [[2, 'asc']]
                } );
        } );

}(jQuery));


                $('#search').click(function(){
                        $start_date = $('#start_date').val();
                        $end_date = $('#end_date').val();
                        if(start_date != '' && end_date !='')
                        {
                                $('#table_ordersByDay').DataTable().destroy();
                                $('#table_ordersByDay').DataTable().ajax.reload();
                        }
                        else
                        {
                                alert("Both Date is Required");
                        }
                });

HTML:

     <div class="input-daterange">
      <div class="col-md-4">
       <input type="text" name="start_date" id="start_date" class="form-control" />
      </div>
      <div class="col-md-4">
       <input type="text" name="end_date" id="end_date" class="form-control" />
      </div>
     </div>
     <div class="col-md-4">
      <input type="button" name="search" id="search" value="Search" class="btn btn-info" />
     </div>
    </div>

Currently using DataTables v1.9.4 as I've been able to figure out how to do complex server side table joins for server side processing so I do not want to update to DataTables 1.10 at this time.

The DataTable I am trying to create uses server side processing. The table contains input elements that allows users to edit values. They have the option to "save" all editable values on the current page. If the user tries to change the page without saving all edits will be lost. So, if someone tries to change the page and there are edits present I want to stop the page change process and give them a yes/no type question to continue. If they select the "yes" option, the page change process continues, if they choose the "no" question then the page change process is terminated, which will then allow them to save

I know that you can create a custom event to fire when the page changes using:

$('#table_id').on('page', function () {
        // do something here
});

My question is, is there a way to stop the pagination process from happening during this event?

The only other thing I can think of doing is to automatically save during the page change process. I'd rather not do that, but, that may be my only choice if there is no way to terminate the page change process using the page event.

I am trying to use a condition on the Joined table with MJoin - I do not want to show archived entries - but it does not work. What do I do wrong?

Thanks in advance!

// Build our Editor instance and process the data coming from _POST
$editor = Editor::inst($db, 'as_users', 'user_id');

########
# Joins
// für die as_user_details
$editor->leftJoin( 'as_user_details as details', 'as_users.user_id', '=', 'details.user_id' );

// as_user_roles
$editor->leftJoin('as_user_roles as roles', 'as_users.user_role', '=', 'roles.role_id');

// Join für den Namen des Users, der dein Eintrag erzeugt hat
$editor->leftJoin('as_user_details as created_details', 'as_users.created_by_user_id', '=', 'created_details.user_id');

// Join für die Qualifikationen 1:n

$editor->join(
    Mjoin::inst('qualifications_names')
        //->validator('qualifications_names[].id', Validate::mjoinMinCount(1))
        ->link('as_users.user_id', 'link_as_users__qualifications_names.user_id')
        ->link('qualifications_names.id', 'link_as_users__qualifications_names.qualification_names_id')
        // TODO archivierte nicht anzeigen
        //->order('name asc')
        ->fields(
            Field::inst('id')
                ->set(Field::SET_NONE)
                ->validator(Validate::required())
                ->options(Options::inst()
                    ->table('qualifications_names')
                    ->value('id')
                    ->label('qualification_name'),
                Field::inst('qualification_name')
                )
        )
        ->where("qualifications_names.archived", "1", "!=")
);

Hi,
when using serverside, i want in the serverside script to to make-use a custom Editor field (dates-datetime difference in HH:mm ) so that it can be easily sorted in the Datatable.
I currently have it as rendered column in Datatable ,but i can't sort it since it does not exist in the Serverside Editor script .

Thank you.

i have this situation:
i have in database table called day-trip and table called Trip
i have linking table between day-trip and trip called Trip_DayTrip, in this table i have the day-trip and trip id as primary key and another column named order.

in my client side, i have option to see all the day-trips in table or to see the day-trips of one trip.
i want to able to reorder the day-trips of one trip, but i must say that the table that show the day-trip of the trip is the same that show all the day-trips, the table just get id of trip and filtered.

can i make this work with editor?

I'm having a strange problem with a datetime field in the editor: When I edit an existing row, the particular field in question displays the datetime field as [object Object] the first time I edit a row. After that, it always defaults to the current date in the editor field, no matter what the previously saved date is.

My Javascript code for the field in question is:

            {
                "label": "Date Due: ",
                "name": "duedate",
                "type": "datetime",
                "placeholder": "Choose Due Date",
                                "dateFormat": $.datepicker.ISO_8601,
                "opts": { firstDay: 0 }
            },

I do some computation server-side to facilitate the filtering requirements for this field. My PHP code for this field is:

        Field::inst( 'duedate' )
            ->validator( Validate::notEmpty() )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( function( $val, $data, $opts) {
                global $id;
                $filterDate = '';
                $displayDate = date("Y-m-d", strtotime( $val) );
                if ( strtotime($val) < strtotime('today') ) {
                    $filterDate = 'overdue';
                } elseif (strtotime($val) === strtotime('today')) {
                    $filterDate = 'today';
                } elseif (strtotime($val) === strtotime('tomorrow')) {
                    $filterDate = 'tomorrow';
                } else {
                    $filterDate = 'beyond';
                }
                //  Now build an object in JSON format
                $dueDateObj = (object) [
                    'filterDate' => $filterDate,
                    'displayDate' => $displayDate
                ];
                return $dueDateObj;
            } )
            ->setFormatter( function( $val, $data, $opts) {
                return date("Y-m-d", strtotime($val));      
            } ),

I've tried a couple of variations that have not helped, because I do't really see another way to do what I'm aiming at.

Hello,

If I display the following table named "tabletest", I can edit lines as expected and they will be displayed correctly in the browser immediately after editing. This can also be seen in the returned data:
DT_RowId: "row_1"
DT_RowId: "row_2"
DT_RowId: "row_3"
Rows 1, 2, and 3 were edited and returned correctly.

{data: [{DT_RowId: "row_1", id: 1, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…},…],…}
data: [{DT_RowId: "row_1", id: 1, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…},…]
0: {DT_RowId: "row_1", id: 1, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…}
1: {DT_RowId: "row_2", id: 2, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…}
2: {DT_RowId: "row_3", id: 3, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…}
debug: [{query: "SELECT id as "id" FROM tabletest WHERE id = :where_0 ",…}, {,…}, {,…},…]
0: {query: "SELECT id as "id" FROM tabletest WHERE id = :where_0 ",…}
1: {,…}
2: {,…}
3: {query: "SELECT id as "id" FROM tabletest WHERE id = :where_0 ",…}
4: {,…}
5: {,…}
6: {query: "SELECT id as "id" FROM tabletest WHERE id = :where_0 ",…}
7: {,…}
8: {,…}

When I select the same data with a nested Where condition, the "select" condition is displayed correctly in the browser.
In the following you can see the "select" condition as given in the tutorial:

$editor->where(function ($outer){
  $outer->where(function ($orBuilder) {
    $orBuilder->where('zuweisungtyp', 'Operator_MW')
               ->and_where('zuweisung', 'WebOEM');
  });

  $outer->or_where(function ($orBuilder) {
    $orBuilder->where('zuweisungtyp', 'Operator_OS')
              ->and_where('zuweisung', 'WebOEM');
  });

   $outer->or_where(function ($orBuilder) {
    $orBuilder->where('zuweisungtyp', 'TSO')
              ->and_where('zuweisung', '11111');
  });
});

but if i now change the same lines with the primary key 1,2 and 3, the data in the browser is not updated. Instead, the line with primary key 28 is updated (only in the view, not in the Database). But there nothing has changed at all.
The update command to the database is implemented correctly and the rows with the primary key 1,2 and 3 are updated. When I reload the page manually, the correct result is displayed.

{data: [{DT_RowId: "row_28", id: 28, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…},…],…}
data: [{DT_RowId: "row_28", id: 28, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…},…]
0: {DT_RowId: "row_28", id: 28, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…}
1: {DT_RowId: "row_28", id: 28, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…}
2: {DT_RowId: "row_28", id: 28, ip: "53.1.1.2", netzwerkzone: "p_app2", dns: "s03245645",…}
debug: [{query: "SELECT id as "id" FROM tabletest WHERE id = :where_0 ",…}, {,…}, {,…},…]
0: {query: "SELECT id as "id" FROM tabletest WHERE id = :where_0 ",…}
query: "SELECT  id as "id" FROM  tabletest WHERE id = :where_0 "
bindings: [{name: ":where_0", value: "1", type: null}]
1: {,…}
2: {,…}
3: {query: "SELECT id as "id" FROM tabletest WHERE id = :where_0 ",…}
query: "SELECT  id as "id" FROM  tabletest WHERE id = :where_0 "
bindings: [{name: ":where_0", value: "2", type: null}]
4: {,…}
5: {,…}
6: {query: "SELECT id as "id" FROM tabletest WHERE id = :where_0 ",…}
query: "SELECT  id as "id" FROM  tabletest WHERE id = :where_0 "
bindings: [{name: ":where_0", value: "3", type: null}]
7: {,…}
8: {,…}

in my opinion the sql statement is correct:

query: "SELECT  id as "id", 
ip as "ip", 
netzwerkzone as "netzwerkzone", 
dns as "dns", 
zuweisungtyp as "zuweisungtyp", 
zuweisung as "zuweisung"
 
 FROM  tabletest
 
 WHERE (zuweisungtyp = :where_1 AND  zuweisung = :where_2 )
    OR (zuweisungtyp = :where_5 AND  zuweisung = :where_6 )
    OR (zuweisungtyp = :where_9 AND  zuweisung = :where_10 )"

I would expect instead of

0: {DT_RowId: "row_28
1: {DT_RowId: "row_28
2: {DT_RowId: "row_28

the return Value:

0: {DT_RowId: "row_1
1: {DT_RowId: "row_2
2: {DT_RowId: "row_3

if i do the same only with one where claus (respectively with no nested where clause) the update view works correct.

Hi ,
i need to get the sum of selected rows : on key-focus and row select trigger

thats my code :

var table = $('#mytable').DataTable({
                ajax:{
                    url: "jsonTable.php", // Change this URL to where your json data comes from
                    type: "POST", // This is the default value, could also be POST, or anything you want.
                    data: function(d) {
                        d.payment_type = $("#payment_type").val() 
                    }

                }, 
                select: true,
                keys: true,
                processing : true , 
            });

table
.on('key-focus', function (e, datatable, cell) {
datatable.row( cell.index().row ).select();
// here i need to get the sum of selected row when i use the keyboard shortcut
});

I am using datatables on my WordPress website. However, when I tried to use the custom filter for my age column, I got an error saying "Cannot read property 'ext' of undefined", how can I fix it?
here is the live site: http://humstaging.byu.edu/cambodianoralhistories/

Please help me to solve problem row order drag and drop and sequence problem? Friends

https://stackoverflow.com/questions/59556297/asp-net-mvc-jquery-datatable-roworder-dragdrop-and-id-problem

Hi friends, I have two identical table as named left and rifht table. When I select or clicked one row on left table, I want to move data to another identical Datatable or reverse. I find a solution but it doesnt work.I think it is valid for old version of Datatable.How can I handle this task.

Hi There,

I am running into a problem. I just want to add a button on each row and I have achieved it by using below code

Codepen url: https://codepen.io/ravi-shukla/pen/GbZXzj?editors=0010

$('#example').DataTable({
data: data,
 "columns": [           
   { "data": "name" },
   { 
     "data": "name",
     "render": function ( data, type, row, meta ) {
       return '<span>'+data+'</span>';
     }
   }
 ],
});

But i just want to render a javascript object like below:

$('#example').DataTable({
   data: data,
   "columns": [           
     { "data": "name" },
     { 
       "data": "name",
       "render": function ( data, type, row, meta ) {
          return $('span');
       }
     }
   ],
});

is it possible?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

in Node.js ,run parent/child editor,console display unhandled promise error:[object Promise]ReferenceError:mjoin is not defined,why?

Hi,

Currently working a solution that allows the user to save away the view they currently have, this includes sort, visible columns from the datatable and some other filters on data that we have.

Using the stateSaveCallback event i've managed to retrieve the settings i need to save from the datatable, translate them into our view model and save them away in the db in a report table.

I've also now started to look at the loading process, I have the Jquery to load from the server but i am struggling to have the datatable fire the stateLoadCallBack event, nothing seems to fire it, i've also tried the fnStateLoadParams event, this also doesn't appear to fire.

I've had a good read of the API methods available but cannot seem to find anything that would trigger the datatable to reload and hence fire these events for me to pull settings from the DB.

Any pointers would be appreciated.

I want to create a checkbox filter for my story column. I am currently using the SearchPane but I realized this is not exactly what I want.  I would like to have a checkbox filter that contains the following values and those values may not yet exist in the current dataset. 

Agriculture
Childbirth
Dance
Divorce
Khmer Rouge
Khmer Rouge Aftermath
LDS Conversion Stories
Reunification
Songs
Village Life

At the same time, each row may have multiple values from above( as you can see from the first two rows from my live site).  Here is my live site example: http://humstaging.byu.edu/cambodianoralhistories/
what is the best way to achieve this?

here is my current code

                           jQuery(document).ready(function() {
            var table = jQuery('#myTable').DataTable(
                {
                    searchPane:{
                        columns:[':contains("Gender")',':contains("Birth Province")',':contains("story")',]
                        , threshold: 0
                    }
                }


            );
            jQuery.fn.dataTable.ext.search.push(
                        function( settings, data, dataIndex ) {
                            var min = parseInt( $('#min').val(), 10 );
                            var max = parseInt( $('#max').val(), 10 );
                            var age = parseInt( data[6] ) || 0; // use data for the age column


                            if ( ( isNaN( min ) && isNaN( max ) ) ||
                                ( isNaN( min ) && age <= max ) ||
                                ( min <= age   && isNaN( max ) ) ||
                                ( min <= age   && age <= max ) )
                            {
                                return true;

                            }
                            return false;

                        }
                    );

            // Event listener to the two range filtering inputs to redraw on input
            jQuery('#min, #max').keyup( function() {
                console.log(table);
                table.draw();

            } );


        } );

Hi,
I am using the Material Dialog that contains input fields. When I show the dialog and the underlying table has a few rows (e.g. less than 200), the input component reacts immediately. However when the table contains more rows, e.g. 600, the input fields become sluggish and has a lack of about 0.5 to 1 second.
* I am not using pagination, while the user demands all rows visible.
* I have extensively looked at the calls like drawing/keylisteners etc.on the table, but couldn't find any excessive call.
* I also use 'changeDetection: ChangeDetectionStrategy.OnPush' for the component to improve performance.
It looks like something is happening in the underlying table (which was already rendered) that somehow reacts on the input fields and consumes some resources that causes the sluggish reaction/feedback in the inputfield.

Any idea what is causing this and how to solve this problem?

Thanks in advance.
Mark

Hello,

I would like to do : https://datatables.net/examples/api/row_details.html

Parent row : Nom - Adresse - CodePostal - Ville - Pays
Children row : Telephone - Telecopie - SiteInternet - SiteSupport

The data is stored in the table name : 'Para_Editeur'

I work with database SQL Server.

1. How I can add icon "+" on the rows of my table ?
2. How I search the data of my row parent ?

My script 'editeur.js' (Datatable parent):

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+   
        '<tr>'+
            '<td>Téléphone :</td>'+
            '<td>'+d.Telephone+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Télécopie :</td>'+
            '<td>'+d.Telecopie+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Site Internet :</td>'+
            '<td>'+d.SiteInternet+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Site Support :</td>'+
            '<td>'+d.SiteSupport+'</td>'+
        '</tr>'+     
    '</table>';
}
 
$(document).ready(function() {
    var table = $('#table_editeur').DataTable( {
        "bProcessing": true,
        "serverSide": true,
        "ajax":{
            url :"./response-displayrow_editeur.php", // json datasource
            type: "post",  // type of method  ,GET/POST/DELETE
            error: function(){
                $("#table_editeur_processing").css("display","none");
              }            
          },        
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": '',
            },
            { "data": "Nom" },
            { "data": "Adresse" },
            { "data": "CodePostal" },
            { "data": "Ville" },
            { "data": "Pays" },
            { "data": "Telephone" },
            { "data": "Telecopie" },
            { "data": "SiteInternet" },
            { "data": "SiteSupport" },
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#table_editeur tbody').on('click', 'td.details-control', function () {        
        var tr = $(this).closest('tr');
        // var tdi = tr.find("i.fa");
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            // tr.find('svg').attr('data-icon', 'plus-circle');
            tr.removeClass('shown');            
            // tdi.first().removeClass('fa-minus-square');
            // tdi.first().addClass('fa-plus-square');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            // row.child(format(tr.data('ACA'), tr.data('ACA'))).show();
            // tr.find('svg').attr('data-icon', 'minus-circle');
            tr.addClass('shown');
            // tdi.first().removeClass('fa-plus-square');
            // tdi.first().addClass('fa-minus-square');
        }
    } );    
} );

My script 'response-displayrow_editeur.php' (Datatable parent):

<?php
    //include connection file
    include_once(".\db_connection.php");
 
    // getting total number records without any search
    $sql = "SELECT dbo.Para_Editeur.Nom,dbo.Para_Editeur.Telephone,dbo.Para_Editeur.Telecopie,dbo.Para_Editeur.SiteInternet,dbo.Para_Editeur.SiteSupport FROM dbo.Para_Editeur";
    $stmt = sqlsrv_query( $conn, $sql);

    if( $stmt === false ) {
        die( print_r( sqlsrv_errors(), true));
        }

    //iterate on results row and create new index array of data
    while( $obj = sqlsrv_fetch_object( $stmt)) {
         $data[] = $obj;
    }   
 
    echo json_encode($json_data);  // send data as json format
 
?>

Thank you for help

I'm using an old version of AngularJS (1.7.7) and DataTables (1.10.20). I wire the table up like this:

<table ng-if="model.ItemExists" ui-jq="dataTable" ui-options="dataTableOptions" id="search-results" class="display nowrap datatable cell-borders" style="width: 100%;">

The "ui-jq" attribute allowed me to use custom options for DataTables:

$scope.dataTableOptions = { dom: "lfBrtip", lengthMenu: [[25, 50, -1], [25, 50, "All"]], language: { emptyTable: 'No items matched your search criteria' }, buttons: [ { text: 'Export', className: 'button button:hover', extend: 'csv' } ] };

There's a search options section with a button that calls the following AngularJS function:

`$scope.getItemHistory = function () {

$http({
    method: 'GET',
    url: $scope.getUrl('/My/Search/Url'),
    params: {
        firstParam: $scope.model.FirstValue,
        secondParam: $scope.model.SecondValue, 
        thirdParam: $scope.model.ThirdValue
    }
}).then(function successCallBack(response) {

    $scope.model.SearchResults = response.data;

}, function errorCallback(response) {

    alert("There was an error gathering the item's information. Please try again");
});

};`

"SearchResults" is a model that contains a few bits of important data and the rows returned from the query. Works great the first go-around.

The kicker is when I perform a second search. If I modify the search params and run it again, the extra rows are added to the DataTables table, but the info area isn't updated, and if I change the length menu, the extra rows disappear. I'm perplexed as to why the first search performs as expected, but any subsequent searches fail. I've checked the model result as it gets sent back to the view, and it's correct and valid JSON. It appears that DataTables isn't updating itself correctly when I don't use either a POST MVC view model or wire up an ajax function to retrieve the data.

I've tried making calls to "ajax.reload()", but "ajax" is null. I've tried all manner of hoops and jumps to get around this, but I'e come up with nothing.

Te cuento, actualmente estoy haciendo el ejercicio de un data table con 5000 registro, con datos en duro, mi consulta es como puedo hacer que se carguen solo la primera pagina y cada vez que de en paginacion valla cargando el resto para no colapsar la carga?