I have multiple tables on the same page. I would like to have an onclick event for multiple cells based on class. This part is easy. What I can't seem to figure out is how to get the DataTable object associated with the clicked cell.

Any ideas.

hello friends,

I have a datatable with dynamically created columns. There is an html input box in the cells of this datatable. I want to check the value in each row of the datatable and in the cells of each row. How can I iterate this correctly?

Thanks in advance for your help.

Hi everyone, I am new to javaScript
The objective is to color or select all the rows of the table (dataTable) which includes for example the name of a city "new york" in a button
I have already tried with the 'rowCallback' however it does the action just on the first page and as soon as you go to the second you have to click again.
how could I modify the code below in order to solve the problem?:

       $(document).ready(function() {
         var table = $("#myTable").DataTable({
         // Select all rows that match a specific dept
          function selectdepts(table, office) {
             var oTable = $('#' + table).DataTable();
              var oTT = TableTools.fnGetInstance(table);
              // deselect everything.
              oTable.rows().indexes().each(
                  function(idx) {
                      oTT.fnDeselect(oTable.rows(idx).nodes().to$());
                  }
              );
              oTable.rows().indexes().each(
                  function(idx) {
                      if (oTable.row(idx).data().office === office) { // get Value of button ??
                          oTT.fnSelect(oTable.rows(idx).nodes().to$());
                      }
                  }
              );
              //var s = oTT.fnGetSelected();
              //console.log( "fngetselected length: " + s.length );
          }

      });
  });



          <div>
             <button id="s1">TOKYO</button>
             <button id="s2">SAN FRANCISCO</button>
           </div>

Link to test case: https://jsfiddle.net/BeerusDev/5nLg4bt0/85/

Hello,

I am curious how I can replace the count character added to the 2nd row group (but remain in the first).

The data that I am applying to the second sub rowGroup looks like (1) High, (2) Normal, (3) Low. And with the count next to the data it is kind of an eye sore and could be confusing to some as it will look like:

(1) High (1) //desired result => (1) High

(2) Normal (1) //desired result => (2) Normal

The class that is applied to these sub rowGroups is collapsed dtrg-group dtrg-start dtrg-level-1 if that matters

I'm sorry I have no test case, this is on my localhost.

Ajax code:

require_once('../connection/connection.php');

$sql = "SELECT * FROM accounts WHERE invoice='sent'";

$result = mysqli_query($con,$sql);
 
if ($result->num_rows > -1) {

    while($row = mysqli_fetch_assoc($result)){

        $id = $row['id'];   

        $sql2 = "SELECT * FROM invoices WHERE account_id=$id";
        $result2 = mysqli_query($con,$sql2);

        if ($result2->num_rows > -1) {

            while($row2 = mysqli_fetch_assoc($result2)){
                $data[] = $row2;
                
                /*
                $item_array = array("Bob Marley", "Harley Quinn", "Jack Daniels");  
                $items = implode(', ', $item_array);
                $data['items'] = $items;
                */

                
                $invoice_no = $row2['invoice_no'];  

                $sql3 = "SELECT * FROM item_list WHERE invoice_no=$invoice_no";
                $result3 = mysqli_query($con,$sql3);

                if ($result3->num_rows > -1) {

                    $item_array = array();

                    while($row3 = mysqli_fetch_assoc($result3)){
                        $item_array[] = $row3['item_name'];
                    }   

                    $items = implode(', ', $item_array);

                    $data['items'] = $items;
                }


            }       
        }
    }
}

$results = ["sEcho" => 1,
            "iTotalRecords" => count($data),
            "iTotalDisplayRecords" => count($data),
            "aaData" => $data ];
 
echo json_encode($results);

Jquery/Javascript Datatable Function:

$('#paid-invoices').dataTable({
    "bProcessing": true,
    "sAjaxSource": "ajax-fetch-processing-invoices.php",
    "aoColumns": [
        { mData: 'invoice_no' } ,
        { mData: 'first_name' },
        { mData: 'last_name' },
        { mData: 'company_name' },
        { mData: 'items' },
        { mData: 'date' }
        ]
}); 

No data available in table

Good day,
I've been having some trouble adding an array to a table, the table contains invoice information, and the array contains item information descriptive of that particular invoice. When I run this code, there are no errors per se, but the table is instead completely blank of records, and displays this message: "No data available in table". Like I said, not exactly an error, but it doesn't display any of the data on the invoices or items that are stored in the database.

I figured that that might just be how the queries are configured, and perhaps my invoice didn't have items linked up to it or vice versa, so I tested it out using a dummy array (quoted markup in ajax syntax above), but the same thing happened.

I also checked the network for the ajax request sent out, and everything has been sent out successfully:
{"sEcho":1,"iTotalRecords":3,"iTotalDisplayRecords":3,"aaData":{"0":{"invoice_no":"139","first_name":"Tivya","last_name":"Breytenbach","company_name":"Faero","account_id":"41","date":"2021-07-27"},"items":"zd","1":{"invoice_no":"137","first_name":"Tivya","last_name":"Breytenbach","company_name":"Faero","account_id":"43","date":"2021-07-27"}}}

I'm not sure if this is just not the proper way to write the syntax, but I've looked through tons of documentation and questions related to this (both on the forum and stackoverflow) to no avail. This is the first question I've ever posted on a forum, I would really appreciate it if someone could help me, I'm not sure what I'm doing wrong.

Best wishes

How do I achieve the below styling for pagination?

Hello,

ajax-datatables-rails gem has method called data in datatable file.I have hash values ( key,value) so while iterating it throws below warning -
DataTables warning: table id=user-datatable - Requested unknown parameter 'return_date' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Need a help.

Thank you,
Neha

Hello,

ajax-datatables-rails gem has method called data in datatable file.I have hash values ( key,value) so while iterating it throws below warning -
DataTables warning: table id=user-datatable - Requested unknown parameter 'return_date' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Need a help.

Thank you,
Neha

Hi,
I was wondering is there any way to render SearchBuilder title as HTML?
I'd like to have something like that:

language:{
            searchBuilder:{
                title:{
                    0:'<p class="class="font-weight-bold"">Conditions-Based Filtering:</p>',
                    _:'<p><span class="font-weight-bold">Conditions-Based Filtering</span> - currently applying %d conditions:</p>'
                }
            },

        },

Pour l’un des meilleurs résultats, une personne doit mélanger protéines et glucides en un seul repas. Ainsi, complément protéique peut également être aussi vital pour les personnes à la diète comme il est pour les athlètes et les culturistes. Lors de la planification de la santé ou des paquets de réduction de poids, les gens ignorent généralement la formation de poids, l’une des stratégies d’exercice les plus efficaces, en partie en raison de cette confusion.

Aussi, rejoignez ma publication hebdomadaire gratuite à Runner Pour tous les temps pour la recommandation de rester sur les routes et continuer à fonctionner pour tous les temps. Pourquoi: Mettre le banc à incliner place un stress supplémentaire sur la longue tête de votre brachii biceps à la suite de vous travaillez maintenant à partir d’un déficit. Les rôles non respiratoires des muscles respiratoires sont souvent mis en bataille avec leur fonction dans la respiration..Bodybuilder.
<a href="https://steroidefr.com/produit/testosterone-propionate-u-s-p-zhengzhou-100-mg-sfrc-0122.html">SFRC-0122 achat</a> allez chercher les informations dont vous avez besoin

Utilisez une calculatrice, puis modifiez votre consommation ainsi avec des protéines et d’autres suppléments nutritionnels. Dans le cas où votre objectif est d’emballer sur le muscle, Wunsch conseille d’obtenir au moins 2 grammes de protéines par kilo de poids physique. S’il vous plaît inscrivez-vous ou connectez-vous pour publier une nouvelle remarque.

[b]Efficacité clinique de la testostérone lorsqu’elle est ingérée par les culturistes[/b]

Gardez à l’esprit que les suppléments de bien-être pourrait aider mais ils vont juste vous aider à vivre autant que précisément ce que vous voulez faire préliminaire. Les personnes obèses sont couronnées de succès d’obtenir des muscles supplémentaires que d’autres cependant souffrent généralement d’une mauvaise qualité musculaire attribuable au manque d’éléments de train et de mode de vie (4).

Dans un effort pour brûler les graisses ce que je veux faire est de but tous les plus grands muscles dans le physique. Êtes-vous conscient de la manière appropriée sur la façon de maximiser le développement musculaire?.Construire du muscle.
<a href="https://steroidefr.com/produit/mastodex-propionate-sciroxx-100-mg-sfrc-0070.html">SFRC-0122 achat</a>

Faites une pause en haut - n’oubliez pas de presser - avant d’abaisser lentement la charge à nouveau au point de départ. Pendant que vous changez de cardio à ce système unique et bref d’entraînement d’éclatement, il vous fera regarder 10-15 ans jeune en seulement quelques semaines. En outre, il y avait beaucoup de buzz sur les graisses mono insaturées, également appelé MUFAS.

Link to test case: https://jsfiddle.net/BeerusDev/5nLg4bt0/134/

Hello,

I am trying to use the select option for the user to be able to click on their Task, and mark it as "Completed Task". Once the user selects the checkbox, it will select the row, then move it to another tabbed DataTable as Completed Task.

I initialized the columnDefs and the select options, but no checkboxes appeared?

  columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },

Hello.
I have problem with pageLength parametr, that doesn't work with Ajax. Ajax return json with parametrs draw, recordsTotal, recordsFiltered and data (of course).
My javascript code:

            table = $('#ticketTable').DataTable({
                "order": [[ 0, "asc" ]],
                "columnDefs": [
                    { "targets": [0], "sortable": false }
                ],
                "lengthChange": false,
                "processing": true,
                "serverSide": true,
                "pageLength": 25,
                paging: true,
                "ajax": {url: "/getSeznamServisuJSON"},
                "columns" : [
                    { "data" : ....
                ]      
            });

Below the table is message "Showing 1 to 25 of 555 entries", but all rows is on one page. I can go to next page, however data are same. What's wrong?

btw: sorry for my bad English

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

The form is working as expected except for when the information is to be recorded in the DB. When you click "choose file" and then select the file you want to upload , a record gets created in the DB with the information for the file to be uploaded. Then when I click "Create" another record is created instead of just updating the first record. Neither record has all the information from the form. Im not sure if there is some config error here or what. Has anyone seen this behavior before?

I'm working on displaying child rows using ajax. I've used a couple of blog posts as examples (https://datatables.net/blog/2019-01-11 is one). When I run, I'm sending and receiving the correct request and responses from the server, but am getting a child row where all the fields show as "undefined". I believe I'm really close and am missing something obvious.

    var passStoreNumber = 0;

    /* Formatting function for row details  */
    function format(d) {
        return $('<tr>' +
            '<td></td>' +
            '<td>' + d.StoreNumber + '</td>' +
            '<td>' + d.AccountNumber + '</td>' +
            '<td>' + d.RecordCount + '</td>' +
            '<td>' + d.GrossPrice + '</td>' +
            '<td>' + d.CommissionAmt + '</td>' +
            '<td>' + d.NetSales + '</td>' +
            '<td>' + d.AvgGross + '</td>' +
            '<td>' + d.AvgNet + '</td>' +
            '</tr>').toArray();
    }

    function createChild(row) {

        var rowData = row.data();

        // This is the table we'll convert into a DataTable
        var table = $('<table class="display" width="100%"/>');

        // Display the child row
        //row.child(table).show();

        var childStoreTable = table.DataTable({
            dom: "lrti",
            // pageLength: 5,
            "lengthChange": false,
            bSort: false,
            bInfo: false,
            ajax: {
                url: "api/getChildRowsStore.php",
                dataSrc: 'data',
                type: "post",
                data: {
                    storenumber: passStoreNumber,
                    startdate: "<?=$saveStartDate?>",
                    enddate: "<?=$saveEndDate?>",
                },
            },
            columns: [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {data: "StoreNumber"},
                {data: "AccountNumber"},
                {data: "RecordCount"},
                {data: "GrossPrice"},
                {data: "CommissionAmt"},
                {data: "NetSales"},
                {data: "AvgGross"},
                {data: "AvgNet"},
            ],
        });

        // Display the child row
        row.child( format(row.data()) ).show();
    }

        function destroyChild(row) {
        var table = $("table", row.child());
        table.detach();
        table.DataTable().destroy();

        // And then hide the row
        row.child.hide();
    }



    // Add event listener for opening and closing child rows
    $('#storeTable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = storeTable.row(tr);

        passStoreNumber = storeTable.cell(row, 1).data();

        if (row.child.isShown()) {
            // This row is already open - close it
            destroyChild(row);
            tr.removeClass('shown');
        } else {
            // Open this row
            createChild(row);
            tr.addClass('shown');
        }
    });

Link to test case: https://jsfiddle.net/BeerusDev/5nLg4bt0/171/

Hello,

I have tried to create a tabbed DataTable, but 1) the tabs aren't working like they should. 2.) My select option isn't working. I can select the row and click on the "Mark Task as Complete" and it will delete the item in the DataTable. What I am trying to do is have it save as a rowNode then remove from table and draw it to completedTable. But I am getting a script error

Uncaught TypeError: Cannot read property 'nodeName' of null

I'm using datatable editor and its quill plugin https://editor.datatables.net/plug-ins/field-type/editor.quill .

For some reason I cannot combine a header style with a bullet list. I can select a different header 2, 3 or 4 ... but if I select a list, it jumps back to the default "" header and vice versa.

How can I fix this? In the example it works: https://quilljs.com/docs/formats/

That's my editor init:

// Editor Newsroom
editor_newsroom = new $.fn.dataTable.Editor( {
    // ...
    fields: [{
        label: "Bodytext:",
        name: "news.bodytext",
        className: 'block full',
        type: "quill",
        toolbarHtml:
            '<div id="toolbar-toolbar" class="toolbar">'+
                '<span class="ql-formats">'+
                    '<select class="ql-header">'+
                        '<option value="2"></option>'+
                        '<option value="3"></option>'+
                        '<option value="4"></option>'+
                        '<option selected=""></option>'+
                    '</select>'+
                '</span>'+
                '<span class="ql-formats">'+
                    '<button class="ql-list" value="ordered"></button>'+
                    '<button class="ql-list" value="bullet"></button>'+
                '</span>'+
            '</div>'
        }
    ]
});

Is it possible to add a <a> tag with a link next to the search box, top, bottom or side of it? See attachment.
I want to create advanced search on a different html page.

Hi there.
Something is missing here.

https://codepen.io/JLDR/pen/PojopYZ

If visible: true, you can resize window and responsive is working OK.
If you set visible: false, the middle column turns insivible (as expected), but responsiveness doesn't work anymore.

Is this a known issue or is something missing here?

Thanks in advance.

Link to test case: https://jsfiddle.net/BeerusDev/5nLg4bt0/178/

There is my working example with JS sourced data, the issue is when I try to add the code to my dynamic example, (AJAX sourced Data), it gives me the error:

jQuery.Deferred exception: Cannot read property 'style' of undefined TypeError: Cannot read property 'style' of undefined

Here is my code with AJAX:

<!DOCTYPE html>
<html lang="en">
    <head>
    <!-- Stylesheets -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap5.min.css"/>
    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap4.min.css"/>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    </head>
    <body>
        <div class="container">
        <button id="button">Mark Task as Complete</button>
        <table id="taskTable" class="table table-bordered" cellspacing="0" style="width:100%">
            <thead>
                <tr>
                    <th>Assigned To</th>
                    <th>Task Status</th>
                    <th>Priority</th>
                    <th>Task</th>
                    <th>End Date</th>
                    <th>Percentage Complete</th>
                </tr>
            </thead>
        </table>
        </div>
    </div>
    </body>
<script>
function loadTasks(){
    var uri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestDynamicTaskList')/items?$select=AssignedTo,Priority,Title,Status,StartDate,DueDate,PercentComplete"
    $.ajax({
        url: uri,
        method: "GET",
        headers: {
            "Accept": "application/json; odata=verbose"
        },
        success: function(data) {
            if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                console.log(data);
                var table = $('#taskTable').DataTable();
                table.rows.add( data.d.results ).draw();
            }
        },
        error: function(error) {
            alert("Status: " + textStatus);
            alert("Error: " + errorThrown);
        }

    });
}

$(document).ready(function (){

    function filterGlobal () {
        $('#taskTable').DataTable().search(
            $('#global_filter').val()
        ).draw();
    }

    var collapsedGroups = {};
    var top = '';
    var parent = '';

    var table = $('#taskTable').DataTable({
    columns: [
    {"data": "AssignedTo", visible: false },
    {"data": "Priority", visible: false},
    {"data": "Title"},
    {"data": "Status"},
    {"data": "StartDate"},
    {"data": "DueDate"},
    {"data": "PercentComplete"}
  ],
  
  dom: 'frt',
  columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
  select: true, 
  order: [[2, 'asc']],
          rowGroup: {
                dataSrc: [
                    'AssignedTo',
                    'Priority'
                ],
                startRender: function(rows, group, level) {
                    var all;
                    if (level === 0) {
                        top = group;
                        all = group;
                    } else if (level === 1) {
                        parent = top + group;
                        all = parent;
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[top]) {
                            return;
                        }
                    } else {
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[parent]) {
                            return;
                        }
                        all = top + parent + group;
                    }
                                        
                    var collapsed = !collapsedGroups[all];
                    //console.log('collapsed:', collapsed);
    
                    rows.nodes().each(function(r) {
                        r.style.display = collapsed ? 'none' : '';
                    });
                    
                    var priorityClass = '';
                    
                    rows.every(function (rowIdx, tableLoop, rowLoop, data){
                      var data = this.data();
                      var api = $.fn.dataTable.Api('#taskTable');
                        //console.log(api);

                      //console.log(data.Priority)
                    switch(data.Priority){
                        case '(1) High':
                            priorityClass = 'red';
                          break;
                        case '(2) Normal':
                            priorityClass = 'orange';
                          break;
                        case '(3) Low':
                            priorityClass = 'yellow';
                          break;
                      }
                        
                    });
                    //Add category name to the <tr>.
                    
                    if(level === 0){
                    return $('<tr/>')
                        .append('<td colspan="8" style="text-align: left;">' + group + ' (' + rows.count() + ')</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', collapsed);
                    } else if (level === 1) {
                    return $('<tr/>').addClass(priorityClass)
                        .append('<td colspan="8" style="text-align: left;">' + group + '</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', collapsed);
                    }
                    
    
    
                }
    
            }
});
try {
    loadTasks();
} catch (err) {
    alert(err.message);
}
$('#taskTable tbody').on('click', 'tr.dtrg-start', function() {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
        table.draw(false);
    });

$('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
      } );
});
</script>
</html>

is my code

var editor;
var tabla;

$(document).ready(function () {

    editor = new $.fn.dataTable.Editor({

        @*ajax: {

            edit: {
                type: 'POST',
                url: '@Url.Action("ClientesNuevos", "ClientesProspectosCom")'
            },
        },*@
        ajax: '@Url.Action("ClientesNuevos", "ClientesProspectosCom")',
        table: "#example",
        idSrc: 'Id',
        fields: [{
            label: "Id",
            name: "Id"
        }, {
            label: "Nombre",
            name: "Nombre"
        }, {
            label: "Paterno",
            name: "Paterno"  /// chingon este wey
        }
        ]//,
        //formOptions: {
        //    inline: {
        //        onBlur: 'submit'
        //    }
        //}
    });

    $('#example').on('click', 'tbody td.row-edit', function (e) {
        editor.inline(table.cells(this.parentNode, '*').nodes(), {
            submitTrigger: -2,
            submitHtml: '<i class="fa fa-play"/>'
        });
    });

    $('#example').on('click', 'tbody td.row-remove', function (e) {
        editor.remove(this.parentNode, {
            title: 'Delete record',
            message: 'Are you sure you wish to delete this record?',
            buttons: 'Delete'
        });
    });

    tabla = $('#example').DataTable({
        bInfo: false,
        resposive: true,
        "scrollX": true,
        language: {
            "search": "Busqueda",
            "emptyTable": "No existe el registros con los criterios seleccionados",
            "sNext": "Sig",
            "sPrevious": "Ant"
        },
        dom: 'Bfrtip',
        pageLength: 10,
        columns: [
            { data: "Id", visible: true, orderable: true },
            { data: "Nombre", visible: true, orderable: true },
            { data: "Paterno", title: "Paterno", visible: true, orderable: true },
            {
                data: null,
                defaultContent: 'edit',
                className: 'row-edit dt-center',
                orderable: false,
                visible: true
            },
            {
                data: null,
                defaultContent: '<i class="fa fa-trash"/>',
                className: 'row-remove dt-center',
                orderable: false,
                visible: true
            },
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [{
            extend: "createInline",
            editor: editor,
            formOptions: {
                submitTrigger: -2,
                submitHtml: '<i class="fa fa-play"/>'
            }
        }]
    });

});