How To Use DOM Property In Datatable Using Jquery

Introduction

In this article, we will learn how to used DATATABLE DOM property in jQuery.

DataTables will add a number of elements around the table and show additional information about it. The position of these elements on screen are controlled by a combination of their order in the document (DOM)

This parameter is used to control their ordering and add the additional mark-up in the DOM.

Each table control in DataTables has a single unique letter associated with it, and that letter it used in this DOM.

Options:

built-in table control elements are in DataTables :

• l – length changing input control
• f – filtering input
• t – The table!
• i – Table information summary
• p – pagination control
• r – processing display element

Plug-ins

DataTables feature plug-ins can be used to add additional features.

The following extensions can be initialized through the DOM option:

• B – Buttons

Datatable With Dom Example

$("#tblOrgMainInfo").DataTable({
        "processing": true,
        "serverSide": true,
        "bDestroy": true,
        dom: 'lBfrtip', //set custom dom property set
        buttons: [
            {
                text: 'Refresh',
                action: function (e, dt, node, config) {
                    RefreshAction();
                }
            }
        ],
        order: [0, "desc"],

        "ajax": {
            "url": '/AdPlays/GetMainOrgPlayInfo',
            "type": "POST"
        },
        "columns": [
            { "data": "Id", "name": "Id", "autoWidth": true },
            { "data": "Name", "name": "name", "autoWidth": true },
            { "data": "Domain", "name": "domain", "autoWidth": true },
            { "data": "Employee_count", "name": "Employee_count", "autoWidth": true },
            { "data": "Percent_male", "name": "Percent_male", "autoWidth": true },
            { "data": "Zip_code", "name": "Zip_code", "autoWidth": true },
            { "data": "SicCode", "name": "SicCode", "autoWidth": true },
            { "data": "SicOffice", "name": "SicOffice", "autoWidth": true },
            { "data": "SicIndustrial", "name": "SicIndustrial", "autoWidth": true },
            {
                "data": "Id", "name": "Id", "autoWidth": false,
                render: function (data, type, row) {
                    var params = "'" + row.FileName + "'";
                    return '<center><a href="javascript:void(0);" onclick="ViewAgeInfo(' + row.Id + ')"  style="float: left;margin: 3px;"><i class="fa fa-eye" aria-hidden="true" data-toggle="tooltip" data-placement="left" title="View Age Info"></i></a></center>';
                },
                searchable: false, sortable: false
            }


        ]
    });

If you have any questions or face any problems about this article, please let me know in comments.

For new blogs check. here.

Thank You