This is my code.Please tell me where I am doing wrong to disable datatable smart search

var table = $('#jq-datatables').DataTable({
        "ajax": url,
        "type": "POST",
        //"serverSide": true,
        "processing": true,
        "aoColumns": dataArr,
        "iDisplayLength": parseInt($('#rowsLimit').html()),
        columnDefs: [
            {
                targets: targetArr,
                visible: false
            },
            {
                type: 'date-sort',
                targets: [11,12,17,18]
            },
            {
                targets: 8 ,
                className: 'disableRowClick'
            }
        ],
        "search": [{
            "smart": false,
        }],
        "deferRender": true,
        "scrollX": true,
        "iDisplayLength": parseInt($('#rowsLimit').html()),
        "order": [[ 1, "desc" ]],
        "oLanguage": {
            "sLengthMenu":   $('#perPage').html()+":   _MENU_",
            "sInfo":         $('#showing').html()+" _START_ "+$('#to').html()+" _END_ "+$('#of').html()+" _TOTAL_ "+$('#entries').html(),
            "sInfoEmpty":    $('#showing').html()+" 0 "+$('#to').html()+" 0 "+$('#of').html()+" 0 "+$('#entries').html(),
            "sZeroRecords":  $('#noDataAvailable').html(),
            "oPaginate": {
                "sPrevious": $('#previous').html(),
                "sNext":     $('#next').html(),
            }
        }
    });


$('#jq-datatables_filter input').keypress(function(e) {
        if (e.which == 13) {
            table.search({
                input: this.value,
            }).draw();
        }
    });

Is this well known? any possible fix?

To reproduce : open the following link, search with the browser search for e-mail, see the unaligned table head.
https://www.datatables.net/examples/basic_init/scroll_x.html

I have a user that is unhappy when he presses the navigation buttons on the bottom, and he has to scroll to top of the table. Is there a way to allow the user to go to the top of the table?

<table id="customInbox" datatable="" dt-options="custominboxdetails.dtOptions" dt-columns="custominboxdetails.dtColumns" dt-column-defs="custominboxdetails.dtColumnDefs" class="angtable">

My Js Code is

$scope.custominboxdetails.dtOptions = DTOptionsBuilder.fromFnPromise($scope.custominboxdetails.getTableData(workflowname)) .withDOM('Bfrtip') .withOption('scrollX', '100%') .withOption('rowCallback', rowCallback) .withButtons( ['excel', 'pdf']) .withPaginationType('full_numbers')

How to get excel icon in place of excel button in datatable..

My reference files are
```
<script src="Scripts/Angular/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="Scripts/Angular/dataTables.columnFilter.js" type="text/javascript"></script>
<script src="Scripts/Angular/dataTables.tableTools.js" type="text/javascript"></script>
<script src="Scripts/Angular/dataTables.buttons.js" type="text/javascript"></script>
<script src="Scripts/Angular/buttons.flash.min.js" type="text/javascript"></script>
<script src="Scripts/Angular/buttons.html5.min.js" type="text/javascript"></script>
<script src="Scripts/Angular/buttons.print.min.js" type="text/javascript"></script>
<script src="Scripts/Angular/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="Scripts/Angular/jszip.min.js" type="text/javascript"></script>
<script src="Scripts/Angular/pdfmake.min.js" type="text/javascript"></script>
<script src="Scripts/Angular/vfs_fonts.js" type="text/javascript"></script>

<script src="Scripts/Angular/angular.min.js" type="text/javascript"></script>
<script src="Scripts/Angular/angular-route.min.js" type="text/javascript"></script>

<link href="Styles/premiere_blue/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/Angular/angular-datatables.js" type="text/javascript"></script>
<script src="Scripts/Angular/angular-datatables.columnfilter.js" type="text/javascript"></script>
<script src="Scripts/Angular/angular-datatables.buttons.min.js" type="text/javascript"></script>```

'aoColumns': [
{ 'sTitle': 'SNO', 'mData': 'slno', 'sClass': 'essential' },
{ 'sTitle': 'Ticket No', 'mData': 'ticketnumber', 'sClass': 'essential' },
{ 'sTitle': 'Short Description', 'mData': 'shortdescription', 'sClass': 'essential' },
{ 'sTitle': 'Incident State', 'mData': 'incidentstate', 'sClass': 'essential' },
{ 'sTitle': 'Created Date', 'mData': 'created', 'sClass': 'essential' },
{ 'sTitle': 'Assigned to', 'mData': 'assignedto', 'sClass': 'essential' },
{ 'sTitle': 'Remarks History', 'mData': 'remarks', 'sClass': 'essential' },
{ 'sTitle': 'Clock', 'mData': 'clock', 'sClass': 'essential' },
{ 'sTitle': 'Totaltime Worked', 'mData': 'totaltimeworked', 'sClass': 'essential', "bSortable": false, "bVisible": false },
{ 'sTitle': 'Planned Due Date', 'mData': 'plannedduedate', 'sClass': 'essential' },
{ 'sTitle': 'Ticket History', 'mData': 'tickethistory', 'sClass': 'essential' },

         //some logic for if condition
        { "fnRender": function (oObj) {

                var userId= oObj.aData[oObj.iDataColumn]
                //alert(userId);
                return '<a id = open-modal data-toggle=modal href=#modal class=btn >' + 'Edit' + '</a>';

               }
        }
    ],

I am Try many Conditions . but not successful .

<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/tabletools/2.2.0/css/dataTables.tableTools.css" rel="stylesheet" />

I use below code:
var oTable=$('#datatable2').dataTable({

                         "bStateSave": true,
                         "bServerSide": true,
                         "sAjaxSource": "projectlist",
                         "bAutoWidth": false,
                         "bProcessing": true,

                         "oLanguage": {
                            "sLengthMenu": "Show _MENU_ records per page    ",
                            "sEmptyTable": "No Records Available",
                             "oPaginate": {
                                 "sPrevious": "",
                                 "sNext": ""
                                 }
                        },
                         "aoColumns": [
                                        { "mData": null,"bSortable": false, "bVisible": true, "sClass": "centertext" },
                                       { "mData": "ietitle"},
                                       { "mData": "iecode"},
                                       { "mData": null,"bSortable": true,
                                           "mRender" : function(obj){
                                               var status = obj.status;
                                               if(status != null && status !=''){
                                                   var progressdiv ="<div>"
                                                         +status+"</div>" ;
                                               }
                                               else{
                                                   var progressdiv ="<div>"
                                                         +"Not available</div>" ;
                                               }
                                            return progressdiv;
                                           }
                                       },
                                       { "mData": null, "bSortable": false,
                                           "mRender" : function(obj){
                                               var progress = obj.progress;
                                               var percent = (progress/8)*100;
                                               var percentage =Math.round(percent);

                                                    var progressdiv ="<div data-toggle='tooltip'   title='"
                                                     + percentage +"% Complete'"
                                                     +"data-container='body' data-placement='top' style='margin-bottom:0px; background-color:#A59898' class='progress'>"
                                                     +"<div class='progress-bar progress-bar-info'"
                                                     + "role='progressbar'"
                                                     + "aria-valuenow='"
                                                     + progress +"' aria-valuemin='0' "
                                                     + "aria-valuemax='100' style='width:"
                                                     + percent + "%'> <span>"+percentage+"% Complete</span></div></div>" ;

                                            return progressdiv;
                                           }
                                       },
                                       { "mData": null,
                                           "bSortable": false,

                                           "mRender" : function(
                                                    obj) {
                                               var iecode = obj.iecode;
                                               var _id = obj._id;
                                               var editRemoveDiv = "<div><a data-toggle='tooltip'  data-container='body' title='View Project' class='glyphicon glyphicon-file text-system' data-placement='top' data-original-title='View' href='<%=application.getContextPath() %>/manageProjects/viewProject?id="
                                                + iecode
                                                + "'></i></a>"
                                                + "&nbsp;&nbsp;"
                                                + "<a href='#' data-toggle='tooltip' name='"+ iecode+"' data-container='body' title='Edit Project' class='glyphicon glyphicons-pencil selectPopup' data-placement='top'"
                                                + "></a>"
                                                +"&nbsp;&nbsp;"
                                                +"<a href='#' name='"+ iecode +"' data-container='body' class='deletepopup' title='Delete Project' onclick='popup()' data-effect='mfp-flipInY' data-toggle='tooltip' data-placement='top' data-id='<%=application.getContextPath() %>/deletproject?id="
                                                + iecode
                                                + "'><span class=' popup glyphicon glyphicon-trash text-danger'></span></a></div>";
                                                return editRemoveDiv;
                                           }
                                       }

                                        ],

                                        "aaSorting" : [ [ 1, 'asc' ] ],
                                        "aLengthMenu" : [
                                                [ 5, 10, 15, 20, -1 ],
                                                [ 5, 10, 15, 20, "All" ] ],
                                        "iDisplayLength" : 10,
                                        "sDom": '<"dt-panelmenu clearfix"lTfr>t<"dt-panelfooter clearfix"ip>',
                                        "oTableTools": {
                                            "sSwfPath": "<%=application.getContextPath() %>/vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
                                             "aButtons": [
                                                         {
                                                             "sExtends": "copy",
                                                             "mColumns": [1, 2, 3, 4]
                                                         },
                                                         {
                                                             "sExtends": "csv",
                                                             "mColumns": [1, 2, 3, 4]
                                                         },
                                                         {
                                                             "sExtends": "pdf",
                                                             "mColumns": [1, 2, 3, 4]
                                                         },
                                                                                                {
                                                             "sExtends": "print",
                                                             "mColumns": [0,1, 2, 3, 4, 5],
                                                             "sMessage": 'Click print or cancel <button>Print</button>',
                                                             "fnClick": function (nButton, oConfig, oFlash) {
                                                                    oTable.fnSetColumnVis(5, false);
                                                                    $('div.dataTables_scrollHead').show();
                                                                    $(window).keyup(function(){
                                                                          oTable.fnSetColumnVis(5, true);
                                                                    });
                                                                }
                                                         },

                                                     ]
                                          },
                                         "fnRowCallback": function(nRow, aData, iDisplayIndex) {
                                            var oSettings = oTable.fnSettings();
                                            $("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
                                            return nRow;
                                        },
                                    });

Thanks for the data table plugin. It solved most of the problems. But not fully though. I am using backbone.js in the front end and jersey frame work in the backend. My issue is when ever I clicked next button in the data table I am able to get the set of records according to my start and end index I pass as parameters. But, when it hits the line fnAddTr is going back to fnServerData method and this repeats infinitely. So, I tried appending the dom (this.$('tbody').append(rowView.render().el);). But it got appended to the same page and it is not moving to another page.For instance 0-20 initial display. After clicking next it is 0-40 in same page instead of 21-40 in 2nd page.
This is my data table code

that.table = that.$('#employeesTable').dataTable({
    "iDisplayLength": 20,
    "iDeferLoading": 46,
    "bServerSide": true,
    "sDom": 'lfr<"giveHeight"t>ip',
    "aaSorting": [[
            1,
            'asc'
        ]],
    "aoColumns": [{
        "bSortable": false
    }, {
        "bSortable": true
    }, {
        "bSortable": true
    }, {
        "bSortable": true
    }, {
        "bSortable": false
    }],
    "fnServerData": function(url, aaData, fn) {
        //that.renderPageRows(model);
        $.ajax({
            "url": that.getUrl(),
            "data": aaData,
            "iDisplayLength": 20,
            "success": function(data) {
                _.each(data, function(model) {
                    //that.renderPageRows(model);
                    var rowView = new TableRow({
                        model: model,
                        isPagination: true
                    });
                    //   this.$('tbody').append(rowView.render().el);
                    this.table.fnAddTr(rowView.render().el);
                })
            },
            "dataType": "json",
            "cache": false
        });
    }
});

Hi,

I'm using two datatables on the same page with two editors instance.

In order to use the RowReorder extension, I need to attach the editor instance :

rowReorder: {
        dataSrc: 'sequence',
        editor:  editor
    }

but the thing is that I'm having just one DataTable function to initialize my two tables, because they have exactly the same characteristics but different data (sets by sending d.cat to the server-side) (the lines below once) :

var oTable = $('.display').DataTable( {
        ajax: {
            url: "../php/staff.php",
            type: "POST",
            data: function(d, table){
                        d.re_ne = re_ne;
                        d.cat = table.nTable.dataset.cat;
                    }
        },
        columns: [
            { data: "order_id", visible: false, searchable: false, orderable: true },
            { data: "cat", visi ....etc etc etc

Then I had to initialize two editors for the inline edit/delete function (lines below twice with different editor name and different table id) :

editor = new $.fn.dataTable.Editor( {
        "ajax": "../php/staff.php",
        "table": "#example",
        "fields": [ {
                "label": "Order_ID:",
                "name": "order_id"
            }, {
                "label": "Cat:..... etc etc etc

but now, if I leave the code like that, the RowReorder will work only on the datatable attached to the editor defined on the datatable initialization.

So, to try to get it work, I tried not to give an editor instance on the RowReorder initialization but using .on('row-reorder') instead :

oTable.on( 'row-reorder', function ( e, details, edit ) {
        editor
            .edit( edit.nodes, false, {
                submit: 'changed'
            } )
            .multiSet( edit.dataSrc, edit.values )
            .submit();
    } );

Then, to get the right instance of the Editor, I wanted to get the Editor's API like that :

var myTable = $('#example').DataTable();
var editor = myTable.editor();

editor.create( 2 );

but when I implement those lines to the function above :

oTable.on( 'row-reorder', function ( e, details, edit ) {

        // GETTING THE EDITOR INSTANCE BY GETTING THE TABLE ID
        var editor = $("#"+e.target.id).DataTable().editor();

        // SUBMIT CHANGES WITH THE RIGHT EDITOR FOR THE RIGHT DATATABLE
        editor
            .edit( edit.nodes, false, {
                submit: 'changed'
            } )
            .multiSet( edit.dataSrc, edit.values )
            .submit();
    } );

It returns editor.edit is not a function !!!

Is there a way I can do that without creating two datatable initializations ?
Maybe by modifying the rowReorder.js file to let the initialization detects which datatable is being initialized ?

hummmm.... !

I hope I'm clear enough. Thanks in advance

C.

Hello,
I fixed the problem of used Header pages within SharePoint Online 2013 because it does not work, after several checks I solved by adding the dataTables.fixedHeader.js the following code at line 213

$('#s4-workspace')
    .on( 'scroll'+this.s.namespace, function () {
        that.update();
    });

    _constructor: function ()
    {
        var that = this;
        var dt = this.s.dt;
        $('#s4-workspace')
            .on( 'scroll'+this.s.namespace, function () {
                that.update();
            });
        $(window)
            .on( 'scroll'+this.s.namespace, function () {

                that._scroll();
            } )
            .on( 'resize'+this.s.namespace, function () {
                that.s.position.windowHeight = $(window).height();

                that.update();
            } );

Another solution is not to change the original js?

Thank you

Hi ,

I have tried to use export features to table tools using this link : http://datatables.net/release-datatables/extensions/TableTools/examples/bootstrap.html

button shows but on click on CSV, Copy, EXCEL and PDF nothing happens.
i have placed js, css, images and swf file also. There is no error occur in console.

Please help me if i missed something.

I am using server side implementation for datatables. Is it possible to prevent server side filtering during key down event and only post back when search button is click instead?

Hi, how can I populate datatable from stored procedure....? in other words I need get differents columns from many tables, not neccesary from only one table.

From my php code I call this stored procedure as: "select * from get_myFunction(param1, param2...)"

What I need to change in the example:

/* DB tables to use with necesary joins */
$table = " myTable;

// Table's primary key
$primaryKey = 'tablePrimaryKey';

Thanks in advance...

I'm posting this solution here as it took me several hours of searching the forums and internet, and i couldn't find one post that had a complete solution. since this is such a common requirement for server platforms like .Net and PHP, can i suggest that it could be one of the built-in options for the DataTable() constructor in the API, e.g. preserveFormValuesForHiddenRows: true

it was quite a jarring discovery to find that off-screen values were being lost, my (admittedly ill-informed) expectation was that the DataTables API was non-destructive to the HTML form state. I would suggest that the proposed new option would be turned on by default, or else have some in-your-face message on all pages relating to form inputs: "WARNING IF YOU ARE USING ANY SERVER PLATFORM THEN YOU REALLY SHOULD USE THIS OPTION TO AVOID UNEXPECTED SIDE EFFECTS OF CLIENT-SIDE PAGING/SORTING...."

the background to this problem is detailed here:
https://datatables.net/examples/api/form.html
The javascript example code on this page shows how to select hidden form values and access them on the client side. I think it would also be useful to give an example of how to restore those lost form values so that server platforms are not affected by the user performing a client-side page/search.

here is the code i have gleaned from several sources:

    $(document).ready(function()
        {
            var dt = $('#myTable').DataTable({
                'order': [],              // bypass default first-pass sorting by DataTables API that changes with the original sort order
                stateSave: true     // persist search/page state across postbacks and page loads
            });

            $('form').submit(function(){
                // create a hidden div, otherwise all the values are displayed on screen momentarily while the form submits
                var $div = $('<div>', {style: 'display:none'});

                // append all hidden inputs to the hidden div
                $(dt.rows({search:'removed'}).nodes()).find('input').appendTo($div);

                // append the hidden div to the form
                $($div).appendTo(this);
            });
        }
    );

While i'm at it, here is a derived GridView class for .Net users who want an 'out of the box' component that delivers DataTables support for the .Net GridView, with the above functionality built-in.

/// <summary>
/// A standard asp.net Gridview control that is customised for use with the DataTables jquery API.
/// The page should reference the correct javascript and css files:
/// https://code.jquery.com/jquery-1.12.0.min.js
/// https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
/// https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css
/// </summary>
public class JsGridView : GridView
    {
        public JsGridView()
        {
            // all done on client side
            this.AllowCustomPaging = false;
            this.AllowPaging = false;
            this.AllowSorting = false;
            this.CssClass = "display";
            this.GridLines = GridLines.None;

            // change the GridView to use a tHead element
            this.DataBound += (object o, EventArgs ev) =>
            {
                if(this.HeaderRow != null)
                    this.HeaderRow.TableSection = TableRowSection.TableHeader;
            };

            this.Init += JsGridView_Init;
        }

        private void JsGridView_Init(object sender, EventArgs e)
        {
            // DataTables loses all form values that are not visible on the page, due to paging / searching etc
            // these need to be manually stitched in to the form, ref: https://datatables.net/examples/api/form.html
            string script = String.Format(@"
    $(document).ready(function()
        {{
            var dt = $('#{0}').DataTable({{
                'order': [],        // bypass default first-pass sorting by DataTables API that interferes with the original sort order
                stateSave: true     // persist search/page state across postbacks and page loads
            }});

            $('form').submit(function(){{
                // create a hidden div
                var $div = $('<div>', {{class: 'hide'}});

                // append all hidden inputs to the hidden div
                $(dt.rows({{search:'removed'}}).nodes()).find('input').appendTo($div);

                // append the hidden div to the form
                $($div).appendTo(this);
            }});
        }}
    );", this.ClientID);
            this.Page.ClientScript.RegisterStartupScript(typeof(string), this.ClientID, script, true);

        }
    }

I have edited the ssp.class.php to use the following query when retrieving data:

$data = self::sql_exec($db, $bindings, "SELECT SQL_CALC_FOUND_ROWS `" . implode("`, `", self::pluck($columns, 'db')) . "`
FROM `x_product`
WHERE NOT EXISTS (SELECT * FROM supplier_main_product_list WHERE supplier_main_product_list.x_product_code = x_product.x_product_code)
             $order
             $limit"
        );

This works perfectly in terms of populating the Datatable, but when I try to perform a search on the Datatable it doesn't do anything ("processing" indicator flashes on and off over the table, keeping all of the data and not performing any sort of search)

What could I do to make the search functionality still work?

I have a JavaScript based dropdown navigation menu that uses jquery.EasyMenu (http://www.jqueryscript.net/menu/Unlimited-Multi-level-Dropdown-Menu-with-jQuery-easyMenu.html) and it is working fun, until I add the CDN script link for DataTables. Then when I load the page I all of a sudden get a "Object doesn't support property or method 'easymenu' error for the navigation. If I remove the CDN link for DataTables this error goes away. I would really like to use DataTables but need my menu to work, what do I have to do to get them to play nice?

This is the code that errors out:

Hi, im having an issue, when i export the table to excel, and using this plug in, it exports me the header including the filter data inside the select filter, can you please help me?? or there is a way so i can clone the footer of the table and put instead of the header?
excuse my english!

I am looking to buy the Data tables and editor

3 Questions

1. I notice that the form option from the grid is always a pop up. Is their a way of hiding the grid and just displaying the form. i.e use javascript to hide the form
2. Can we use advanced search features like greater than, less than between. Basically is it easy to create a custom form
3. Is their an export feature or can i write my own custom functions to export data

Good day!

I have two little problems:

1. The paging numbers become NaN for the "All" position. However if I check JSON resonse at the same time, counting figures are in place and are correct.
As a temporary solution I just put 10000 =).
I saw in the forum other users also had problems with that for some reasons.

Here are my Settings:

"lengthMenu": ((mobile)?[7, 10, 25, 50, 10000, "All"]:[10, 25, 50, 100, 10000, "All"]),

2. Second thing is - -inin title doesn't work for exported Excel files.

        buttons: [
            {
                extend: 'excelHtml5',
                text: '<input id="download" type="image" class="btn btn-black" src="/modules/datatables/images/download.png" title="Сохранить отображаемые записи">',
                exportOptions: {
                    columns: [ 1,12,13,15,16,17,18,19,20,6,7,8,9,10,11,22 ],
                    title: "Заказы"
                }
            }
        ],

I even found it... oh bloody where was that... Aha! Got it! :)))

table.context[0]._buttons[0].inst.c.buttons[0].exportOptions.title

And I see the value here, but it's not picked up by the export mechanism. Export just gives the standard name from the page title.

Here's the test stand (everyone can play :)) ):

http://kalyanman.ru/index.php
datatables:datatables

I hope you won't have problems with language :).

Regards,
Nikita.