i am new to this data table n editor so please guide me how to work with it i am not able to understand by mannual
i want to use it with php

I follow this link to create table and edit rows
http://kingkode.com/free-datatables-editor-alternative/#comment-1129

i try this

<script type="text/javascript">
        debugger;

        alert("1");
        debugger;

        $(function () {
            $.ajax({
                type: "POST",
                url: "Maintenance.aspx/data_call",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    debugger;
                   // var table_data = result.d;
                   // var d = result.d;
                    alert("12");

                    debugger;

                    var re = JSON.parse(result.d).response;
                    debugger;

                    console.log(JSON.parse(result.d).response);
                    debugger;

                  
                    $("#example").empty()

                    if(re.length >0)
                    {
                        $("#example").append
                        ("<thead><tr><th>RegionID</th><th>Region</th><th>StartDate</th><th>EndDate</th>");

                        for (var i = 0; i < re.length; i++)
                        {
                            if(re[i]!==null)
                            {
                                $("#tabledata").append("<tbody><tr><td>" +
                                    re[i][0] + "</td><td>" +
                                    re[i][1] + "</td><td>" +
                                    re[i][2] + "</td><td>" +
                                    re[i][3] + "</td></tr></tbody>");
                            }
                        }


                    }

                    var myTable;
                    debugger;

                    myTable = $('#example').DataTable({
                        "sPaginationType": "full_numbers",
                        data: re,
                        //columns: columnDefs,
                        dom: 'Bfrtip',
                        "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }], // Needs button container
                        select: 'single',
                        responsive: true,
                        altEditor: true,     // Enable altEditor
                        buttons: [{
                            text: 'Add',
                            name: 'add'        // do not change name
                        },
                        {
                            extend: 'selected', // Bind to Selected row
                            text: 'Edit',
                            name: 'edit'        // do not change name
                        },
                        {
                            extend: 'selected', // Bind to Selected row
                            text: 'Delete',
                            name: 'delete'      // do not change name
                        }]

                    });

                },
                error: function (error) {
                    debugger;
                    var r = error.responseText;
                    var errorMessage = r.Message;
                     alert(errorMessage);
                     alert(r);
                     alert(Error);
                }
            });
        });

    </script>

```

links
 ```
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"src ="js/altEditor/dataTables.altEditor.free.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/> 
      <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css"/> 
      <link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css"/>
      <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css"/> 

  <style type="text/css">
    table.dataTable tbody>tr.selected,
    table.dataTable tbody>tr>.selected {
      background-color: #A2D3F6;
    }
  </style> 

Only headers is display on page and this show error on console

Uncaught TypeError: Cannot read property 'DT_RowId' of null

I am trying to set up a semantic ui multiple select to filter the table. I have managed to get it to work, however the search is subtractive (more keywords equals fewer results) instead of additive (returning the content of both keywords).

The multiple select returns a list of the currently selected keywords ex ["Cancelled", "Success"], and I would like to filter by both elements individually and merge the result if that makes sense, instead of filter by both and return those that match all the inputs.

Thanks!

Hi,
I am using this jquery datatable for the first time and i want to know how can i iterate through each page using keyboard arrow keys. Please do the needful.

Hi,
The no.of columns differ for three cases. The datatable is being displayed properly for the first two cases as they have equal no.of columns. But when i try to load for the third case, i get a hazy look, and its displaying 'sWidth undefined' as the no.of columns increases. And the same is happening for the vice-versa.. Could you help me with this? I tried to destroy the datatable but it did not work as i call the same function for three cases in same grid.

Thanks

I have used an example to build a dropdown select on my table but when I use that in combination with the Excel export button, the excel file opens but the widths of the columns are all set to the maximum (255) so you have to go and reset the column widths in Excel which is pain. I then removed the footer code with the selects and the widths work fine when exporting to excel. Here is my code for the Javascript Init. The footer: false option has no effect. I have tried to bind a mousedown event and remove the footer html before the file is generated using JQuery but it did not work.

    var table = $('#dynamic-table').dataTable( {
        colReorder: true,
        select: {
            style: 'single'
        },
        dom: 'Bfrtlip',
        buttons: [
                  {
                      extend: 'excel',
                      footer: false                   
                  },                  
                  'copy', 'csv', 'print', 'colvis'
        ],      
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'" style="max-width: 180px;">'+d+'</option>' )
                } );
            } );
            
        }       
    }); 

My footer code is (I left the columns blank)

                                <tfoot class="thefooter">
                                    <tr>
                                        <td></td>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot>

Hi - I am using a spinner package to display a spining indicator when the pdf button is pressed. I can't seem to figure out how to get a call bak when it finishes. I tried to put the code in the exportoptions{format:footer} but it didn't get called and I am not sure when I do get that working, that it gets called at the right time. Is there a proper way to do this with action callbacks?

'''
{
extend: 'pdfHtml5',
customize: function(doc) {

                    //ensure doc.images exists
                    doc.images = doc.images || {};

                    //build dictionary
                    doc.images['checkMark'] = getBase64Image(checkMark);
                    //..add more images[xyz]=anotherDataUrl here

                    //when the content is <img src="myglyph.png">
                    //remove the text node and insert an image node
                    for (var i=1;i<doc.content[1].table.body.length;i++) {
                        if ( doc.content[1].table.body[i][1].text == 'true') {
                            //console.log('text of '+i+' row '+doc.content[1].table.body[i][1].text);
                            delete doc.content[1].table.body[i][1].text;
                            doc.content[1].table.body[i][1].image = 'checkMark';
                        }
                        else {
                            doc.content[1].table.body[i][1].text='';
                        }
                    }
                    doc.content[1].table.widths = [ '9%', '2%', '18%', '8%', '12%', '10%', '8%', '8%', '10%', '8%', '2%', '5%'];
                    var cols = [];
                    cols[0] = {text: 'Left part', alignment: 'left', margin:[20] };
                    cols[1] = {text: 'Right part', alignment: 'right', margin:[0,0,20] };
                    var objFooter = {};
                    objFooter['columns'] = cols;
                    doc['footer']=objFooter;
                },
                text: 'PDF',
                title: 'Warner Pacific Insurance Services - Open Submissions Snapshot '+ currentDate,
                orientation: 'landscape',
                footer: true,
                exportOptions: {
                    columns: ':visible' ,
                    format : {
                        header : function (mDataProp, columnIdx) {
                            spinner.spin(target);
                            //console.log('raw'+mDataProp);
                            var htmlText = '<span>' + mDataProp + '</span>';
                            var jHtmlObject = jQuery(htmlText);
                            jHtmlObject.find('span').remove();
                            jHtmlObject.find('option').remove();

                            var newHtml = jHtmlObject.text();
                            console.log('My header for col: '+columnIdx+' > ' + newHtml);
                            if(columnIdx == 19) return 'U R G';
                            if(columnIdx == 7) return 'Group Name';
                            if(columnIdx == 8) return 'Policy Eff Date';
                            if(columnIdx == 10) return 'Status';
                            if(columnIdx == 14) return 'Case Advocate';
                            if(columnIdx == 16) return '# E N R';
                            return newHtml;
                        },

                        footer: function(mDataProp, columnIdx) {
                            console.log('My footer for col: '+columnIdx+' > ' + newHtml);
                           spinner.stop();
                        },
                    },
                    columns: [/*0,*/ 1, /*2, 3, */ 19, /*4, 5, 6,*/ 7, 8, 9, 10, /*11,*/ 12, 13, 14, 15, 16, 17]
                }
            },

'''

Is there a way to do this using the inline editing? Maybe an example? I want to load tables that are 10 rows x 50, have user edit different cells, tabbing between cells saves to localstorage. What I am having trouble figuring out is how to populate the localstorage on initial load via AJAX, then to push the changes back on a form Submit or other javascript action.

Thanks in advance!

Hi ! I´m currently working in a project utilizing C# ASP.NET and WebMethods for binding data controls such as dropdownlists, lists, etc.

We´re planning on implementing paging to improve server performance in specific windows of time where data traffic is huge (government processing students' data from thousands of schools).

I was wondering if DataTables support (or if there´s any examples) filling its datasource through a C# WebMethod specifically (in our project we´re using Json ajax calls to WebMethods to fill controls' datasources). In that case, I´m guessing we´ll lose the "Search" functionality that dataTables already offers while using Server-Side processing ?

The only practical example I found in this website was written in php (the server side script which is what I need).

Thanks a ton in advance for any help that can be provided !

Facu.

Hi guys,

I am trying to create a table which has quite a lot of attributes, and as an example I created the following page,

<body>
  <table id="example">
    <thead>
      <tr>
        <th class="site_name">Name</th>
        <th>Url </th><th>Type</th>
        <th>Last modified</th>
        <th class="site_name">Name</th>
        <th>Url </th><th>Type</th>
        <th>Last modified</th>
        <th class="site_name">Name</th>
        <th>Url </th><th>Type</th>
        <th>Last modified</th>
        <th class="site_name">Name</th>
        <th>Url </th><th>Type</th>
        <th>Last modified</th>
        <th class="site_name">Name</th>
        <th>Url </th><th>Type</th>
        <th>Last modified</th>
        <th class="site_name">Name</th>
        <th>Url </th><th>Type</th>
        <th>Last modified</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <script>
    $(function(){
      $("#example").dataTable({
                "scrollX": true
            });
    })
  </script>
</body>

I am expecting a scrollable table with all table headers in one line, but the result page is far from my expectation, as you can see from the attached image, some of the table headers are in two lines.

Can anyone give me some help, thanks in advance

Custom message in Print button is not dynamic. When we load data tables, message value is loaded only once.
For example i want:
message:$('#name').text()

$('#name').text() field is dynamic, so when i press PRINT button, i want $('#name').text() field to be loaded every time...
How can i achieve this?

Am trying to enable multiple checkox selection. Any ideas what I am doing wrong?

Included

<link rel="stylesheet" type="text/css" href="DataTables/Select-1.2.0/css/select.bootstrap.min.css"/>
<script type="text/javascript" src="DataTables/Select-1.2.0/js/dataTables.select.min.js"></script>

    var table = $('#users').DataTable( {
        "order": [],
        "columnDefs": [ {
      "targets": [ 0,1,4,8 ],
      "orderable": false
    } ],
        "language":
        {
    "sDecimal":           ",",
    "sEmptyTable":        "Δεν υπάρχουν δεδομένα στον πίνακα",
    "sInfo":              "Εμφανίζονται _START_ έως _END_ από _TOTAL_ εγγραφές",
    "sInfoEmpty":         "Εμφανίζονται 0 έως 0 από 0 εγγραφές",
    "sInfoFiltered":      "(φιλτραρισμένες από _MAX_ συνολικά εγγραφές)",
    "sInfoPostFix":       "",
    "sInfoThousands":     ".",
    "sLengthMenu":        "Δείξε _MENU_ εγγραφές",
    "sLoadingRecords":    "Φόρτωση...",
    "sProcessing":        "Επεξεργασία...",
    "sSearch":            "Αναζήτηση:",
    "sSearchPlaceholder": "Αναζήτηση",
    "sThousands":         ".",
    "sUrl":               "",
    "sZeroRecords":       "Δεν βρέθηκαν εγγραφές που να ταιριάζουν",
    "oPaginate": {
        "sFirst":    "Πρώτη",
        "sPrevious": "Προηγούμενη",
        "sNext":     "Επόμενη",
        "sLast":     "Τελευταία"
    },
    "oAria": {
        "sSortAscending":  ": ενεργοποιήστε για αύξουσα ταξινόμηση της στήλης",
        "sSortDescending": ": ενεργοποιήστε για φθίνουσα ταξινόμηση της στήλης"
    }
},
        "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        ajax: 'php/table.users.php',
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox'
            },
            {
                "data": "profile_pic",
                render: function ( data, type, row ) {
                var path ='http://www.eadvertise.eu/ael-futsal-new/upload/profile_pics/'+data;  
                //return '<img class="img-circle" src="'+path" width="100"/>';
                return '<img width="100" class="img-circle" src="'+path+'"/>';
                }
            },
            {
                "data": "full_name"
            },
            {
                "data": "email"
            },
            {
                "data": "password",
                render: function ( data, type, row ) {return '****';}
            },
            {
                "data": "dob"
            },
            {
                "data": "phone_number"
            },
            {
                "data": "status",
                render: function(data,type,row){
                if (data==0){return '<label for=\"status\" id="lblstatus" class="label label-warning">Ανενεργός</label>';}
                if (data==1){return '<label for=\"status\" id="lblstatus" class="label label-success">Ενεργός</label>';}
                if (data==2){return '<label for=\"status\" id="lblstatus" class="label" style="background-color:red;">Διαγραμμένος</label>';}
                }
            },
            {
                data: null,
                render: function ( data, type, row ) {
                if(data.status=="1"){return '<div class=\"btn-group\"><a id=\"edit-button\" data-toggle=\"tooltip\" title=\"Επεξεργασία\" class=\"btn btn-xs btn-default editor_edit\"><i class=\"fa fa-pencil\"></i></a><a id=\"delete-button\" data-toggle=\"tooltip"\ title=\"Διαγραφή\" class=\"btn btn-xs btn-danger editor_remove\"><i class=\"fa fa-times\"></i></a><a id=\"change-status-button\" data-toggle=\"tooltip\" title=\"Απενεργοποίηση\" class=\"btn btn-xs btn-stop editor_changetozero\"><i class=\"fa fa-stop\"></i></a></div>';}
                if(data.status=="0"){return '<div class=\"btn-group\"><a id=\"edit-button\" data-toggle=\"tooltip\" title=\"Επεξεργασία\" class=\"btn btn-xs btn-default editor_edit\"><i class=\"fa fa-pencil\"></i></a><a id=\"delete-button\" data-toggle=\"tooltip"\ title=\"Διαγραφή\" class=\"btn btn-xs btn-danger editor_remove\"><i class=\"fa fa-times\"></i></a><a id=\"change-status-button\" data-toggle=\"tooltip\" title=\"Ενεργοποίηση\" class=\"btn btn-xs btn-stop editor_changetoone\"><i class=\"fa fa-play\"></i></a></div>';}
        
    },
                //defaultContent: '<div class=\"btn-group\"><a id=\"edit-button\" data-toggle=\"tooltip\" title=\"Επεξεργασία\" class=\"btn btn-xs btn-default editor_edit\"><i class=\"fa fa-pencil\"></i></a><a id=\"delete-button\" data-toggle=\"tooltip"\ title=\"Διαγραφή\" class=\"btn btn-xs btn-danger editor_remove\"><i class=\"fa fa-times\"></i></a><a id=\"change-status-button\" data-toggle=\"tooltip\" title=\"Delete\" class=\"btn btn-xs btn-stop editor_change\"><i class=\"fa fa-stop\"></i></a></div>',
                //defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>',
                className: 'center'
            }
            
            
        ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        select: true,
        //lengthChange: false
    } ); 
    

I try this example
https://datatables.net/examples/basic_init/scroll_xy.html

and i do this

<script type="text/javascript">
    $(document).ready(function() {
        $('#tabledata').dataTable({
         bSort: false,
         "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true,
        "scrollX": true,
        dom: 'Blfrtip',
        lengthMenu: [
            [10, 25, 50, -1],
            ['25 rows', '50 rows', 'Show all']
        ],
        buttons: [
            'excelHtml5'
        ]

    } );
} );
</script>

i generate table through jquery

$("#tabledata").append(
"<thead><tr><th>No</th><th>DateTime</th><th>Status</th><th>Spd</th><th>Lon</th><th>Lati</th><th>Ref</th><th>Dir</th><th>No2</th><th>No3</th><th>VehDate</th><th>CoName</th><th>ID</th><th>marks</th></tr></thead>");
for (var i = 0; i < d.length - 1; i++) {
if (d[i] !== null) {
$("#tabledata").append("<tbody><tr><td>" +
d[i][0] + "</td> <td>" +
d[i][1] + "</td> <td>" +
d[i][2] + "</td> <td>" +
d[i][3] + "</td> <td>" +
d[i][4] + "</td><td>" +
d[i][5] + "</td><td>" +
d[i][6] + "</td><td>" +
d[i][7] + "</td><td>" +
d[i][8] + "</td><td>" +
d[i][9] + "</td><td>" +
d[i][10] + "</td><td>" +
d[i][11] + "</td><td>" +
d[i][12] + "</td><td>" +
d[i][13] + "</td><td>" +
d[i][14] + "</td></tr></tbody>");

table generate successfully but searching ,headers, and lines inside the table not working

and also there is sort arrows at the corner left hand side when i click on these sort arrows then headers disappear

i also add these links

<head runat="server">
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<script src="Scripts/map/jquery.fullbg.js"></script><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzSyC-o_Xf8Ki5rOpEyLgR5msc&sensor=false"></script>
<link href="Styles/stylechart.css" rel="stylesheet" />
<link href="Styles/fixed-navigation-bar.css" rel="stylesheet" />
<link href="Styles/map.css" rel="stylesheet" />

<%-- for gridview template--%>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<%--<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />--%><link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="Styles/grid/datatables_bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>    
<script type="text/javascript"  src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript"   src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"   src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript"  src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript"  src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript"  src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script><link rel="stylesheet"  href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
 <link href="Styles/grid/buttons.dataTables.min.css" rel="stylesheet" />   

<%-- for gridview template--%>
</head>

check this image

Hi

I am trying datatable editor. But it gives me <b>Fatal error</b>: Uncaught Error: Call to undefined method PDO::transaction() in Editor.php:547 error

I cant figure out the problem

Would appreciate any help

And the code is

       <?php
        // DataTables PHP library
       include( "Editor/php/DataTables.php" );

        $database = 'metro_rail';
           $user = 'root';
           $password = '';
   $host = gethostbyname('localhost');
       $db = new PDO("mysql:host=$host;dbname=" . $database . ';charset=utf8', $user, 
        $password,
        array(PDO::ATTR_EMULATE_PREPARES => false,
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));

       // Alias Editor classes so they are easy to use
       use
           DataTables\Editor,
           DataTables\Editor\Field,
           DataTables\Editor\Format,
           DataTables\Editor\Mjoin,
           DataTables\Editor\Upload,
           DataTables\Editor\Validate;

       // Build our Editor instance and process the data coming from _POST
       Editor::inst( $db, 'bim_with_vault_final_master_data' , 'id')
           ->fields(
               Field::inst( 'bim_with_vault_final_master_data.Document_Number' ),
               Field::inst( 'bim_with_vault_final_master_data.Revision' ),
               Field::inst( 'bim_with_vault_final_master_data.Title' ),
               Field::inst( 'bim_with_vault_final_master_data.Revision_Date' ),
               Field::inst( 'bim_with_vault_final_master_data.Design_Stage' ),
               Field::inst( 'bim_with_vault_final_master_data.Status' ),
               Field::inst( 'bim_with_vault_final_master_data.File_Type' ),
               Field::inst( 'bim_with_vault_final_master_data.Upload_Date' ),
       Field::inst( 'bim_with_vault_final_master_data.Source' ),
       Field::inst( 'bim_with_vault_final_master_data.REV_CHK' ),
       Field::inst( 'bim_with_vault_final_master_data.DESIGN_STAGE_CHANGED' ),
       Field::inst( 'bim_with_vault_final_master_data.STATUS_CHANGED' ),
       Field::inst( 'bim_with_vault_final_master_data.Model_Status' ),
       Field::inst( 'bim_with_vault_final_master_data.Model_Captured_Status' ),
       Field::inst( 'bim_with_vault_final_master_data.PROJECT_DES' ),
       Field::inst( 'bim_with_vault_final_master_data.ORG_DES' ),
       Field::inst( 'bim_with_vault_final_master_data.DIS_DES' ),
       Field::inst( 'bim_with_vault_final_master_data.TECH_DIS_DES' ),
       Field::inst( 'bim_with_vault_final_master_data.SUB_SYS_DES' ),
       Field::inst( 'bim_with_vault_final_master_data.DOC_TYPE_DES' ),
               Field::inst( 'bim_with_vault_final_master_data.WBS_DES' )
           )
           ->process( $_POST )
           ->json();


        ?>

The title says it pretty well, but for a little clarification..

When you click on a row to drag and drop it into a different position on the table, is it possible to identify the initial row (the one being dragged) specifically as the instigator of change?

I am trying to implement "Export To Excel" function for Datatable using following code:
'dom': 'Bfrtip',
'buttons': [{
extend: 'excel',
text: 'Export To Excel',
filename: exportFileName,
exportOptions: { columns: ':visible' }
}]

This code works fine except one thing. It is opening file save dialog instead of downloading with new IE save file dialog (bottom of browser) it is opening classic save file dialog.

Please help me to resolve this.

Thanks in advance.

Hi all,

So I ran in to an issue that was driving me crazy, and I finally figured it out. Not sure if this is a bug or not, but here's the scenario.

1) I'm using the latest version of DataTables.
2) I'm using jQuery 1.9.
3) Issue occurred in both Chrome and Firefox.
4) I have NOT configured DataTables to specifically use LocalStorage for anything.
5) I am using client-side processing.

Symptoms:

I had a table that would work fine in a fresh browser session, but at some point it would stop loading data in to the table randomly. The REST API was still called, the data was valid, but it simply would not display. debug.datatables.net wouldn't show any issue (and showed the data was correctly parsed), but on screen the table would be empty, with a stuck "Processing..." if bProcessing was true. If I cleared the browser cache it would fix the problem until it would randomly start doing it again.

Solution:

I finally spent a few hours trying to track it down. Checking all the usual items was not finding any issues, but eventually I stumbled on a mouse movement that seemed to cause it. My application utilizes panels which are sortable. I found that moving one of the panels, even slightly, would cause the issue every time! Looking closer at what was going on, I finally tracked it down to Local Storage - every time a panel was moved on that page, a key was getting stored thus:

http://my.app.url/path/to/page = [[{"id":"some-id"}]]

Whenever this was set, any DataTables on that specific /path/to/page would not render any data. I delete that key via Inspect or Firebug, and instantly a reload of the page renders the data.

This seems to be specifically a rendering issue - the data is definitely getting pulled in, it just doesn't get displayed.

Removing the "id" value specifically seems to resolve it. For example, having the same key equal "[[]]" loads data normally.

Anyway, I'm not sure if this is a bug (i.e. datatables looking at localstorage, seeing a key called "id", and trying to do something with it), or something do with my specific implementation - but I thought I'd report it anyway!

Thanks!

S.

Hi,

I have many multiple ID's. After I followed the coding preference for scrolling and bootstrap tabs, finally there's some conflicts. How are "conflicts" resolved?

$(document).ready(function() {
        var t = $('#place1, #place2, #place3, #place4, #place5, #place6, #place7, #place8, #place9, #place10, #place11, #place12,    #place13').DataTable( {
        "columnDefs": [ {
            "orderable": true,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );

    t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
} );

Is there a positional preference?.

Hello,

I would like to know if there is a way to actually filter the content being loaded into a "select box" in the editor form.
Let's have a look at this example: https://editor.datatables.net/examples/simple/join.html.
The sites, db table has the "id" and "name" fields.
Question: Is it possible to only load the city names starting with "L" in the "Sites" select box? If yes, could you please tell me how to do it? My guess is adding a "where" clause on the "name" field, but for some reason I have only managed to filter the content of my table, not the content of the select box.

Thanks a lot and cheers for a great product!

var nTr=$("#"+rowId).parent().parent();
var columnIndex="";

$('#ListData_data_wrapper .dataTables_scrollHead table thead tr').find('th').each(function($index){console.log($(this).text());
if($(this).text() == 'Status'){
// alert($index);
columnIndex=$index;
}
});

Column index gives me the index of row which i need to update

data.ListDataTable.fnUpdate(result.aaData[0],nTr[0],columnIndex,false);