create account

How to use datatables in Our Web by alfarisi94

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @alfarisi94 · (edited)
$21.33
How to use datatables in Our Web
![A-fancy-Materialize-CSS-datatable-VueJS-component.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516633141/pjdjxxao6thu8d8jtptm.png)
<a href="https://vuejsexamples.com/content/images/2017/09/A-fancy-Materialize-CSS-datatable-VueJS-component.png">image source</a>
This tutorial I will discuss a library that is very useful to display data in the form of tables, this library is also very much in use for web applications related to admnistrasi and relate data. the documentation and features in it are very complete. just start we start how to use it and what are the features in it
#### What Will I Learn?
- Use Jquery
- Implement datatables
- Customize datatables

#### Requirements
- Localhost (xampp,wampp, or etc )
- Internet Connection
- Basic Html & jquery

#### Difficulty
- Basic

#### Tutorial Contents
The first step we must create a file that is in our localhost folder, here I create a folder named <b>developments</b> and create <b>index.html</b> file. Because <a href="https://datatables.net">datatables.net</a> is a library of jquery, then we have to import jquery first. to import jquery , you can go to the official website of jquery https://jquery.com/ 
and please select the jqeuery version you want. In this tutorial I am using jquery version of jquery-3.2.1.min.js. grab the minified jquery to make it lighter. this is my <b>index.html</b>

``` html
<!DOCTYPE html>
<html>
    <head>
        <title>Data table for web apps</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
    </head>
    <body>
    <style type="text/css">
       *{
           padding: 0px;
           margin: 0px;
       }
       html,body{
           width: 100%;
           font-family: 'Alegreya Sans', sans-serif;
       }
    </style>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    </body>
</html>
```
<code>< script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous" >< /script ></code> : Import Jquery with CDN version jquery-3.2.1.min.js

### Implement datatables
Before we start using the library datatables, we must import it first, with munggunakan CDN or you can download it, but more use it via CDN.
there are two that we must import from library datatables, they are <b>css</b> and <b>javascript</b>.
<li><b>Import Css datatables</b></li>
You can add <code>< link rel = "stylesheet" type = "text / css" href = "https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" ></code> before the <code>< /head ></code> closing tag.
<li><b>Import Javascript datatables</b></li>
you can add script <code>< script type = "text / javascript" src = "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"> </ script ></code> after you import jquery, it's important to remember the location of the script library datatable under the jquery script for, the syntax in the library can be read.
<li><b>Make table html</b></li>
After we import datatables now we can use it, i will create a table in html.
<table id="datatable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
        </tbody>
    </table>
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516676329/nxodxyrbg5g2cid0xnzm.png

<li><b>Use and Define Datatables in Javascript</b></li>
Now that we have created a table in our html structure, we will define and use libraries in this way.
<pre><code>
< script type="text/javascript" >
      $(document).ready(function() {
          $('#datatables').DataTable();
      });
  < /script >
</code>
</pre>
<code>$('#datatables').DataTable();</code> :  We named our <b>< table >< /table ></b> element with datatable id, so id that we use to define which element will use library datatables. 

<br /><b>Use Library Datatables</b>
![Screenshot_17.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516677362/omlmvgywzhz5pt87uiec.png)

<br /><b>Not Use Library Datatables</b>
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516677186/gpxnegznuqoodwchwcbh.png


 ### Customize datatables
There is a lot of customization that we can do in datatables. if you want complete documentation please visit their official website https://datatables.net. But in this tutorial I will only discuss some of them

<li><b>Feature enable / disable</b></li>
In datatable we can choose to enable and disable the property we want. for example we have datatables. by default datatable features search, order, and page.
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516724581/bwyacvoubum9mpnj0abd.png


and now i will use featur enable/disable with javascript configuration like this.
<pre><code>
$(document).ready(function(){
    $('#datatables').DataTable({
        "paging":   false,
        "ordering": false,
        "info":     false
    	});
});
</code>
</pre>
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516724810/ughrucx0jdoqzbblwrk6.png
we can see the features paging, info, ordering no longer appear because it has been disabled
<br />
<br />
<li><b>Hidden Columns</b></li>
The following table is not hidden.
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516725327/amxij694zgm5f1snfqfp.png
<br />
We can hidden columns in datatable like this one. 
<pre><code>
$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            }
        ]
    } );
} );
</code>
</pre>
<code>"columnDefs"</code> : the keyword of its configuration, in the form object.
<code>"targets"</code>: Initialization of the order of columns to be hide, its form aray.
<code>"visible"</code> : visible in type data boolean. true or false
<code>"searchable"</code> : searchable in type data boolean. true or false
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516725680/w5edp99vmr60snrekalf.png

we can see the column office not see again, it's because we hide aray into 2 of the columns ie office columns, because in array form, we start the sequence of numbers from 0.


We have successfully used datatable jquery on our web, there are many configurations and other customization from datatables.net, I will discuss in the next tutorial. so many of me hopefully this tutorial can be useful for you. thank you

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@alfarisi94/how-to-use-datatables-in-our-web">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , ,
properties (23)
authoralfarisi94
permlinkhow-to-use-datatables-in-our-web
categoryutopian-io
json_metadata{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":669174,"name":"DataTables","full_name":"DataTables/DataTables","html_url":"https://github.com/DataTables/DataTables","fork":false,"owner":{"login":"DataTables"}},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io","jquery","datatables","web"],"users":["alfarisi94"],"links":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1516633141/pjdjxxao6thu8d8jtptm.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1516677362/omlmvgywzhz5pt87uiec.png"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1516633141/pjdjxxao6thu8d8jtptm.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1516677362/omlmvgywzhz5pt87uiec.png"],"moderator":{"account":"shreyasgune","time":"2018-01-24T06:55:42.037Z","reviewed":true,"pending":false,"flagged":false}}
created2018-01-23 03:21:18
last_update2018-01-24 06:55:42
depth0
children4
last_payout2018-01-30 03:21:18
cashout_time1969-12-31 23:59:59
total_payout_value14.988 HBD
curator_payout_value6.340 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length10,219
author_reputation5,678,893,550,406
root_title"How to use datatables in Our Web"
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id31,541,717
net_rshares2,347,472,981,743
author_curate_reward""
vote details (16)
@iqbalhood · 
Nice Contribution Upvoted Bro...
properties (22)
authoriqbalhood
permlinkre-alfarisi94-how-to-use-datatables-in-our-web-20180124t072746344z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-01-24 07:27:48
last_update2018-01-24 07:27:48
depth1
children1
last_payout2018-01-31 07:27:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length32
author_reputation11,768,748,838,027
root_title"How to use datatables in Our Web"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id31,853,894
net_rshares0
@alfarisi94 · 
thanks bro :)
properties (22)
authoralfarisi94
permlinkre-iqbalhood-re-alfarisi94-how-to-use-datatables-in-our-web-20180124t073807762z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-01-24 07:38:06
last_update2018-01-24 07:38:06
depth2
children0
last_payout2018-01-31 07:38:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length13
author_reputation5,678,893,550,406
root_title"How to use datatables in Our Web"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id31,855,843
net_rshares0
@shreyasgune ·
$1.15
Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
👍  
properties (23)
authorshreyasgune
permlinkre-alfarisi94-how-to-use-datatables-in-our-web-20180124t091239218z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-01-24 09:12:54
last_update2018-01-24 09:12:54
depth1
children0
last_payout2018-01-31 09:12:54
cashout_time1969-12-31 23:59:59
total_payout_value0.864 HBD
curator_payout_value0.284 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation4,924,803,411,962
root_title"How to use datatables in Our Web"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id31,873,682
net_rshares109,011,552,711
author_curate_reward""
vote details (1)
@utopian-io · 
### Hey @alfarisi94 I am @utopian-io. I have just upvoted you!
#### Achievements
- You have less than 500 followers. Just gave you a gift to help you succeed!
- Seems like you contribute quite often. AMAZING!
#### Suggestions
- Contribute more often to get higher and higher rewards. I wish to see you often!
- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!
#### Get Noticed!
- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
properties (22)
authorutopian-io
permlinkre-alfarisi94-how-to-use-datatables-in-our-web-20180125t010804218z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-01-25 01:08:03
last_update2018-01-25 01:08:03
depth1
children0
last_payout2018-02-01 01:08:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,508
author_reputation152,955,367,999,756
root_title"How to use datatables in Our Web"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,062,221
net_rshares0
Help/Feedback