Hi,

I would like to control(perform or not to perform) sort and page events based on user confirmation.

I would like to trigger a user confirmation dialog based on user input Yes/No event should continue/stop.

Is there anyway I can achieve this using Datatable API version "1.10.9".

Thanks in advance,
Vin.

Hi,

when I try to upload a file via the file input, I get the following message:

Cannot insert the value NULL into column 'id', table 'MyDB.dbo.tbl_myTable; column does not allow nulls.
INSERT fails. The statement has been terminated.

I wonder if it is possible to get the SQL statement or a sample SQL statement to see, how the two tables ("normal" data and metadata table for images) are linked together.

All the best,
Markus

Sorry for this basic question.. but I can't figure out by myself how to apply the explanations given on this site about Ajax to my Datatable.

I have a text box near my Datatable. It has CSS Class "num_items". When I type a value in it makes another Ajax call and redraws the Datatable based on a query result from the database and server side processing:

$("input[type='text'].num_items").focusout( function() {
    oTable.fnDraw();
} );

I use Datatables "fnServerData": parameter within the var oTable = $("#mydatatable").dataTable( {.....}); call to send the value in the text box to server side processing to ultimately query the database...

        "fnServerData": function ( sSource, aoData, fnCallback ) {
                aoData.push( { "name": "min_qty", "value": $("#minQty").val() } );
                aoData.push( { "name": "max_qty", "value": $("#maxQty").val() } );
                $.ajax( {
                    "dataType": 'json',
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                } );
            }

But now I want to do something a bit different. I have a PopUp overlay that I want to display values in based on the row in the datatable that the user clicks on. I want to query the database to get this additional info and will need to send a unique identifier from the row that was clicked on. So basically I need to do an Ajax call but I don't know how to!

Can I do something like this? When the row is clicked on I want to make a query to the database but without having to use oTable.fnDraw(); which would make a full resort and re-filter of the table.

    $(document).on("click","table.display td.drug_name", function() {

               "fnServerData": function ( sSource, aoData, fnCallback ) {
                     aoData.push( { "name": "min_qty", "value": $("#minQty").val() } );
                     aoData.push( { "name": "max_qty", "value": $("#maxQty").val() } );
                     $.ajax( {
                         "dataType": 'json',
                         "type": "GET",
                         "url": sSource,
                         "data": aoData,
                         "success": fnCallback
                     } );
                 }


        $('#my_popup').popup('show');
    });

Finally, with serverside processing I'm used to having the line:

echo json_encode( $output );

.. which someone magically returns the query result from the database and Datatables knows how to display that in the table. But in my case here, how would I capture the query result in my jQuery onclick Row function..

$(document).on("click","table.display td.drug_name", function() {
..
Want to make Ajax call here and get result back here also !!
..
});

Sorry for the long winded question!

Thank you in advance.

I come across a question. When I applied {stateSave: true} in the example page Individual column searching (text inputs). I find the sorting and searching at the top is all OK. If I input something at the top search box, after reload the page, the input character is still there in the box and the search result is OK. But if I input character at the table foot individual search box, after reload the page, the search result is still there but there is nothing in the individual search box.
I hope after reload the page, the input character can still show in the individual search box. Is there anyway to do this?

How i can split datatables datetime.
At the moment it only splits date but I need hours:minutes:seconds too..

My code:

$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#min').datetimepicker("getDate");
var max = $('#max').datetimepicker("getDate");
var d = data[4].split("/");
var startDate = new Date(d[1]+ "/" + d[0] +"/" + d[2]);
if (min == null && max == null) { return true; }
if (min == null && startDate <= max) { return true;}
if(max == null && startDate >= min) {return true;}
if (startDate <= max && startDate >= min) { return true; }
return false;
}
);

So it looks like 18/02/2017 - 18:05:45

Hi, I have one column whose render function depends on the output of another column's render function. However, it appears that DataTables calls the render functions in an arbitrary order. Is there a way to ensure that column A is rendered before column B?

Thanks!

It is possible to check all checkbox in all pages in the datatable server side processing result?

Hi,I have check box,on click of that chkbx my header should be fixed and on uncheck should be movable.I have used that enable/disable fixedheader option of data table plugin,but it's getting error as can not read property.

$(document).ready(function() {
 var table= $('#example').dataTable( {
  fixedHeader: {
              header: true,
       }
});
  $('#chk').on( 'click', function (){
            if($('#chk').prop('checked')){
                table.fixedHeader.enable();
                alert('Enabled Fixed Header');
            }
            else if(!$('#chk').prop('checked')){
            table.fixedHeader.disable();
            alert('Disabled Fixed Header');
            }
        });
});

Is my code correct?

I'm exploring a responsive strategy that stacks multiple columns into a single TD

For example:

Would become when the viewport was too narrow.

I also want to support a detail row for other columns (time, arena, etc.)

A few things I've explored:
-creating duplicate columns HomeTeam, AwayTeam, Teams, Score, HomeScore & AwayScore, and using class logic to hide. This is somewhat workable, but then plays havoc with detailed rows wanting to show the hidden columns (for example I don't want to to show AwayScore and HomeScore in details when Score is visible, and vice versa. Same situation for Home & Away Team columns and "Teams".
-I've considered custom renderers but seems to be not very maintainable for a large number of columns - my example is simplifying things a bit and I don't get to take advantage of the responsive class logic elegance.

Is there some other feature I'm overlooking or strategy that you might think effective?

I wonder about a feature enhancement to responsive that could move a column into another column as a stacked column instead of moving it to the hidden / detail row state. For example, Away Team could slide under Home Team, Away Score could slide under Away Score, Time could slide under Date, etc. This feature I could see playing havoc with ordering and filtering on those combo columns, but in my scenario, I am not using ordering or filtering.

Thanks for your input.

Barry Gervin

i have action column in the table in which one delete button and i am using jquery post function to delete any row. But Delete button is only working on the first page. it is not working on other pages.
Here is my delete button.

<button class="btn btn-danger delete_seminar" value="<?php echo $row['id'] ?>"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>

and my jquery function.

$(function() {
$(".delete_seminar").on('click', function(event) {

        if (confirm("Are you sure?")) {
            var data = $(this).val();
            $.post('requests/seminars.php', {delete_sem: data}, function(data) {
                if (data == "delete") {
                    location.reload();
                }else{
                    alert(data);
                };

            });
        }

    });
})

i dont know how to resolve this problem. please help me to come out from this problem.

My Zip is the most inexpensive, comprehensive and efficient marketing system for regional company owners in the nation. ZipTags put “Buy Local” first and help circulate Buy fifa 17 Xbox coins profit the group.

My Zip distributes several of ZipTags to worthy group members totally without any charge to boost this strategy in any given zip code. Exclusive Associates,

as well as fundraisers, can also sell ZipTags, which are then taken about by the consumer, becoming walking advertisements. Exclusive Associates are included in the ZipTag Directory,

http://www.myfifa17coins.com

Hello all, I'm new to datatables, I'm getting a "RangeError: Maximum call stack size exceeded" error, i assumed this is because its loading 150000 records and it is very very slow loading, so on reading further I need to do server side processing I used serverSide:true, in the JS, but the page will not even load any data. am i doing something wrong? I'm sure i have the code right. can anyone help a newbie.

```(function($){

$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {

    ajax: 'php/table.yayall_listings.php',
    table: '#yayall_listings',
    fields: [
        {
            "label": "name:",
            "name": "name"
        },
        {
            "label": "quantity:",
            "name": "quantity"
        },
        {
            "label": "buyout_price:",
            "name": "buyout_price"
        }
    ]
} );

var table = $('#yayall_listings').DataTable( {
    serverSide: true,
    ajax: 'php/table.yayall_listings.php',
    columns: [
        {
            "data": "name"
        },
        {
            "data": "quantity"
        },
        {
            "data": "buyout_price"
        }
    ],
    select: true,
    lengthChange: false,


} );

new $.fn.dataTable.Buttons( table, [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
] );

table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

} );

}(jQuery));
```

question is related to the below data table option.
https://datatables.net/examples/api/row_details.html

I am getting the source data for the data table from ajax call. Then build the table as given in the code below.
I am not getting the event listener for tbody.

I tried to put event code inside ajax success block, now I get the event listener for tbody but not able to click the icon.

<

script>

/* Formatting function for row details - modify as you need */

function format ( d ) {
console.log("i am called")
// d is the original data object for the row
return '

';
}

$(document).ready(function() {
//ajax3
$.ajax({
//check
url:'my api url',
type:'GET',
dataType:'json',
success: function(data){

for(var i=0;i<data.length;i++){
var user= data[i].userName;
drawRow(user,data[i].admin);
}

    $('#excelDataTable').DataTable({

      "sDom": 'lf<"clear">tip'
      });

}
})

// Add event listener for opening and closing details
$('#excelDataTable tbody').on('click', 'td.details-control', function () {
console.log(" ")
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');
    }
} );

});

function drawRow(rowData1,rowData3) {
var row = $("<tr />")
$("#excelDataTable").append(row);
row.append($("<td class=details-control></td><td class=sorting_1> <input type=checkbox class=chkNumber value="+rowData1+"> " + rowData1 + "</td>"+ "<td>" + rowData3 + "</td>"));

}
</script>
<style >

  td.details-control {
background: url('details_open.png') no-repeat center center;
cursor: pointer;

}

tr.shown td.details-control {
background: url('details_close.png') no-repeat center center;
}

</style>

I want all three option together ( page size, export button { multiple options }, search box ).Is it possible? and if possible then how?

can I select key(field name) for json key without data

Hi , I want to disable sorting for my first row in tbody. I have seen all possible example but it did not work for me. I am doing this from last 2 days , so any help will be appreciated. thanks in advance.

javascript

$(document).ready(function() {

    var typeName ='';
    var oTable = $('#table_id1').dataTable({
    //"bPaginate": false,

    "scrollX" : true,
    "iDisplayLength": 100,
     "lengthMenu": [ 100, 250, 500, 750, 1000 ],

     "columnDefs": [
        {
            "targets": [ 0 ],
            "visible": false
        }
    ],




     initComplete: function () {
            this.api().columns(0).every( function () {
                   var column = this;
                   var select = $('<select id="filterSelect"></select>')
                       .appendTo( $('#type').empty() )
                       .on( 'change', function () {
                           var val = $(this).val();
                           typeName = $(this).val();
                           //console.log(val);
                           fnShowHide( typeName );
                           column.search( val ? '^'+val+'$' : '', true, false )
                               .draw();
                       } );

                   column.data().unique().sort().each( function ( d, j ) {
                       if(d == 'Consistent Performers - Debt funds'){
                                select.append( '<option selected value="'+d+'">'+d+'</option>' )
                                column.search( d ? '^'+d+'$' : '', true, false ).draw();
                                fnShowHide(d);
                           }else{
                                select.append( '<option value="'+d+'">'+d+'</option>' )
                           }

                   } );


               } );


            var self = this;
            var api = this.api();
            api.rows().eq(0).each(function(index) {
                var row = api.row(index);
                //alert("row"+row+"row data"+row.data());
                if(index == 0){

                    var $row_to_persist = $(row.node());
                    var $clone = $row_to_persist .clone();

                    $(self).find('thead:last').append($clone);

                  $total_row.remove();
                    row.remove();
                    //$('#table_id1 thead').append($clone);
                    api.draw();
                }

            });

        }



    });

html

I applied dataTable.min.js in my jsp, did not include their CSS. However, their CSS is getting applied to my Table. I don't want their CSS and rather use the CSS used in my application. Please suggest.

Hi,

When I click on a link to see a data table, the complete title line is displayed first. With the columns which are supposed to be invisible.
I think the users are confused when they first see the complete title line.
Is it possible to prevent this?

Andreas

Pleease help.

So, I have a datatable with X rows. In it I have a column named "Weight".
When I render my "Weight" Column for a Row, I want to check if the weight (data) for this Row is the lowest value of all Rows. I only want to look at/compare to "visible" Rows, so filtered Rows should be ignored. However, Rows on other pages should be included if paging us used!

I suspect I should do something in the render method in my columnDefs? In line of...:

"render": function (data, type, row) {
    if (type == "display") {
        if (ISLOWESTWEIGHT) {
            return "<i class='fa fa-trophy'></i> " + data;
        }
        else {
            return data;
        }
    }
}

Hey guys,

i'm having some trouble with this datatable plugin and it's really driving me insane - sitting here and searching for hours just for a (as i think) simple solution.

• I have a simple table with trs and tds - cool.
• The first cell in every row should initiate the row reordering. This only works when the cell contains a unique value - wtf is this shit?

This is my PHP/HTML code:

<?php


    echo "<table class=\"table table-striped table-bordered table-hover\" id=\"PositionsTable\">";

    # table rows are generated in a foreach loop
    echo "<tr id='PositionRow" . $PositionCount . "' class='row-" . $PositionCount . "'>";

    echo "<td id='TDReorder" . $PositionCount . "' class='text-center va-middle reorder' style='cursor: move;'>";
    echo "<i class='fa fa-bars'></i> [ XXXX ]";
    echo "<input type='hidden' name='pos[]' value='" . $row['id'] . "'>";
    echo "</td>";
    echo "<td class='text-center va-middle'><input type='checkbox' name='posid'></td>";

    echo "</tr>";
    # loop ends here

    echo "</table>";


?>

JavaScript code:

var table = jQuery('#PositionsTable').DataTable({
                    "rowReorder": {
                        snapX: 0,
                        selector: 'tr td.reorder'
                    },
                    paging: false,
                    columnDefs: [
                        { orderable: false, targets: '_all' }
                    ]

                });

You see the "[ XXXX ]" in line 10 (PHP/HTML code)? If i replace this with a unique text, everything works fine. If i don't change this code, nothing happens and after drag-end event (mousebutton goes up) the row jumps back to its place.

Second issue is that (when a unique text was entered) everything works, but the values in the first cell (the "drag-my-row-cell") are not reordering.

This is my first success-experience after hours of research, i had tons of different mysterious behaviors on my way to the current result which i could not even explain because it absolutely makes no sense.

Please enlighten me. I'm feeling like a dumb piece of shit and this really fucks my brain.