{"id":4199,"date":"2019-02-14T14:42:42","date_gmt":"2019-02-14T21:42:42","guid":{"rendered":"http:\/\/behstant.com\/blog\/?p=4199"},"modified":"2019-02-14T14:46:50","modified_gmt":"2019-02-14T21:46:50","slug":"jquery-datatables-sdom","status":"publish","type":"post","link":"http:\/\/behstant.com\/blog\/jquery\/jquery-datatables-sdom\/","title":{"rendered":"jQuery Datatables sDom – Custom Elements"},"content":{"rendered":"

This post is the next part of Working with the jQuery Datatables plugin. Since this tutorial is written for those familiar with the plugin You might need to learn the basics of the plugin on the following link http:\/\/behstant.com\/blog\/jquery\/datatables-jquery-implementation\/<\/a>. On this tutorial I am going to focus on how to manipulate the elements of the Datatables by using the sDom property. In the first place you need to know that the plugin jQuery Datatables have 4 visual core elements:<\/p>\n

    \n
  1. Number of items to Display.<\/li>\n
  2. The main table.<\/li>\n
  3. Number of records retrieved.<\/li>\n
  4. Paginator.<\/li>\n<\/ol>\n

    Since these elements are visual you can put them in different positions or perhaps you can decide to set them visible or not, however, remember that not adding information into this property will result in a working DataTable using the default settings.<\/p>\n

    <\/p>\n

    jQuery Datatables sDom meaning<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Shortcut<\/th>\nImage (below) Reference<\/th>\nQuick Reference<\/th>\nComments<\/th>\n<\/tr>\n<\/thead>\n
    l<\/td>\n1<\/td>\nLenght Changing<\/td>\nThis controls the number of records to display in the table.<\/td>\n<\/tr>\n
    f<\/td>\n2<\/td>\nFiltering input<\/td>\nThe search box where you can filter or search data in the table.<\/td>\n<\/tr>\n
    t<\/td>\n3<\/td>\nThe Table<\/td>\nThis is the table where all the information is display.<\/td>\n<\/tr>\n
    i<\/td>\n4<\/td>\nInformation<\/td>\nThis display the number of records inside the jQuery Datatables.<\/td>\n<\/tr>\n
    p<\/td>\n5<\/td>\nPagination<\/td>\nDisplay a pagination section if there many records.<\/td>\n<\/tr>\n
    r<\/td>\n–<\/td>\npRocessing<\/td>\nThe “Processing” text that pops up when the data is being loaded. This is
    \ndisplay when there are many records to be loaded.<\/td>\n<\/tr>\n
    The Following constants were allowed<\/td>\n<\/tr>\n
    H<\/td>\n–<\/td>\njQueryUI theme “header” classes (‘fg-toolbar ui-widget-header ui-corner-tl
    \nui-corner-tr ui-helper-clearfix’)<\/td>\n    		This constants were allow in former versions, now they are
    \ndeprecaded. You can take a look at the source code where the H constant is
    \nreplace, it is replace by a value defined here<\/a> and assigned here<\/a>.<\/td>\n<\/tr>\n
    F<\/td>\n–<\/td>\njQueryUI theme “footer” classes (‘fg-toolbar ui-widget-header ui-corner-bl
    \nui-corner-br ui-helper-clearfix’)<\/td>\n<\/tr>\n
    The Following syntax is expected:<\/td>\n<\/tr>\n
    ‘<‘ and ‘>’ – div elements<\/td>\nI will explain this below.<\/td>\n<\/tr>\n
    ‘<“class” and ‘>’ – div with a class<\/td>\n<\/tr>\n
    ‘<“#id” and ‘>’ – div with an ID<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \"Datatable<\/a>
    Datatable sDom Elements<\/figcaption><\/figure>\n

    Database Setup<\/h2>\n

    Before we can make something with the jQuery Datatable plugin we need information to load so in order to do that please create a table with the name employee in your tutorials database ( if you don’t have this database don’t worry, you can get it by downloading<\/a> the code ).<\/p>\n

    \"Creation<\/a><\/p>\n

    After you create the table is time to fill it. You can take three roads from here:<\/p>\n

    1)You can add information using phpMyAdmin for every record.<\/p>\n

    \"phpMyAdmin<\/a><\/p>\n

    2) You can insert a record manually with random information.<\/p>\n

    --\nINSERT INTO employee(name,email,telephone) VALUES('Pancho Villa','pvilla@revolution.com','123-654-7789');\n--\n<\/pre>\n
    3) Use the insert script located in the download files with hundred of records.<\/p>\n
    After you load the information on the database it is time to start working on the code \ud83d\ude42<\/p>\n
    Table Structure<\/h2>\n
    This is the structure of the table where the results will be loaded:<\/p>\n
    <table id="resultTable" class="resultTable">\n    <thead>\n        <tr>\n            <th>Employee ID<\/th>\n            <th>Name<\/th>\n            <th>Email<\/th>\n            <th>Telephone<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody><\/tbody>\n<\/table><\/pre>\n
    Let me explain a bit about what is going to happen. We are going to make an Ajax request using jQuery in order to get all the records on the employee table that we previously populated, the backend code is not relevant on this tutorial since I am focusing on the jQuery code, nevertheless you can get the PHP backend code in the download files or the video.<\/p>\n
    Managing the data<\/h2>\n
    We are going to place the retrieved data into the tbody<\/span> tag of the table using jQuery like the following example:<\/p>\n
    \/\/\n\n$('#resultTable tbody').html( tbody );\n\n\/\/<\/pre>\n
    With the data loaded in the HTML table we are ready to use the jQuery Datatables Plugin like this:<\/p>\n
    \/\/\n$('#resultTable').DataTable({ sDom: '<"top"lf>r<"H"t><"bottom"i><"floatRight"p>'});\n\/\/<\/pre>\n
    On the tutorial jQuey Datatable Implementation<\/a> I showed you how to load this libraries. Now is time to load the retrieve information withe Our core code:<\/p>\n
    $(document).ready(function() {\n\t$.ajax({\n\t\turl: "php\/retrieveEmployees.php",\n\t\tdataType: "json",\n\t\tsuccess: function( response ){\n\t\t\tvar tbody = "";\n\t\t\tfor (var i = 0; i < response.length - 1; i++) {\n\t\t\t    tbody += "<tr>" +\n\t\t\t\t     "<td><a href='#'>"+ response[i].employee_id +"<\/a><\/td>"+\n\t\t\t\t     "<td>"+ response[i].name +"<\/td>"+\n\t\t\t\t     "<td>"+ response[i].email +"<\/td>"+\n\t\t\t\t     "<td>"+ response[i].telephone +"<\/td>"+\n\t\t\t\t  "<\/tr>";\n\t\t\t}\n\t\t\t$('#resultTable tbody').html( tbody );\n\t\t},\n\t\terror: function(jqXHR, textStatus, errorThrown){\n\t\t\t\/\/ Just for debuggin purposes\n\t\t}\n\t});\n});<\/pre>\n
    In the previous code I have created the table row elements for each record retrieve. The response by the server is a JSON where we can access the employee fields by their name (the reason of this is that on the backend I kept the database column names). This a portion of the JSON retrieved:<\/p>\n
    JSON CODE EXAMPLE<\/p>\n
    If you are concern about data validation then you can make sure that the response variable is an Object and also that is has information, I explain in more detail on the video<\/a>.<\/p>\n
    Usage of sDom Property<\/h2>\n
    As  I show you on the table the meaning of the letters used on the sDom attribute we are creating \/ instantiating the jQuery Datatables by placing the length of records on the top by using the “top” class along with the filtering input, this will be our result:<\/p>\n
    \"Datatables<\/a><\/p>\n
    So far we get the default template because we did not defined the attributes for the “top” class, so the result would had been the same as write:<\/p>\n
    \/\/\n$('#resultTable').DataTable({ sDom: 'lfr<"H"t><"bottom"i><"floatRight"p>'});\n\/\/<\/pre>\n
    Notice that we remove the “less than” and “greater than” chars, this is because the only purpose to use them is to add a class inside of if. You might ask, how does this work? Well, by wrapping the tokens inside  the “less than” and “greater than” chars we are telling the plugin to wrap all inside a div element, therefore if you inspect the code you will find out this:<\/p>\n
    \"Datatable<\/a><\/p>\n
    By adding the “top” class you will find the div containing the “top” class that I mentioned.<\/p>\n
    \"Datatable<\/a><\/p>\n
    CONCLUSION<\/h2>\n
    In conclusion, As you can see placing the correct elements in the property sDOM will allow you to work with classes and the tokens. The sDOM property will help you to position the jQuery Datatables elements in different positions. This property is very useful in when you don’t want the position of the jQuery Datatables in the default settings. Perhaps you want to apply a custom CSS to the Datatables controls. You can use this to move the Search input into the left and the Paginator ( by default is on the right ) see the example:<\/p>\n
    \"Datatable<\/a><\/p>\n
    The jQuery DataTables sDOM property will allow you to customize the layout to fit your design needs.<\/span><\/p>\n
    Leave a reply if you found this helpful or let me know what do you think about this plugin.<\/p>\n
    DOWNLOAD THE FULL CODE<\/h1>\n
    I encourage to purchase the code, as a result, you will get this with the purchase:<\/p>\n