We help IT Professionals succeed at work.
Get Started

i want to add a div before the dt-button-collection.

kumar naik
kumar naik asked
on
1,290 Views
Last Modified: 2017-11-06
when click on image which appears like x  it shows the table thead like first name etc  i want to add a div before it  . and add some text with borders using jQuery or javascript
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>DataTables example - Column visibility integration</title>
	<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
	<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=758e23b3f1a4c34d6c055f5cc10bae7e">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.3/css/fixedColumns.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
	<style type="text/css" class="init">
	
	/* Ensure that the demo table scrolls */
	th, td { white-space: nowrap; }
	div.dataTables_wrapper {
		width: 800px;
		margin: 0 auto;
	}

	div.ColVis {
		float: left;
	}
	/*.dt-buttons{
		float: right!important;
	}*/

	</style>
	
	
	
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js">
	</script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js">
	</script>
	
	</script>
	<script type="text/javascript" class="init">
$(document).ready(function() {
	var table = $('#example').DataTable( {
		dom:            "Brtip",
		scrollY:        "300px",
		scrollX:        true,
		scrollCollapse: true,
		paging:         false,
		buttons:        [{
			extend : 'colvis',
			text   : '<img src="net.png">',

		}],
		fixedColumns:   {
			leftColumns: 2,
		},
		"aoColumnDefs": [
     	 { 'bSortable': false, 'aTargets': [ 0,1 ] }
   			]
	
	});
	
		
});
 


	</script>
	<style type="text/css">

/*--------------------------------------------------------------
this is for adding a check box before the colvis button group.
---------------------------------------------------------------*/	
.dt-button-collection a.buttons-columnVisibility:before,
.dt-button-collection a.buttons-columnVisibility.active span:before {
    display:block;
    position:absolute;
    top:1.2em;
    left:0;
    width:12px;
    height:12px;
    box-sizing:border-box;
}

.dt-button-collection a.buttons-columnVisibility:before {
    content:' ';
    margin-top:-6px;
    margin-left:10px;
    border:1px solid black;
    border-radius:3px;
}

.dt-button-collection a.buttons-columnVisibility.active span:before {
    content:'\2714';
    margin-top:-11px;
    margin-left:12px;
    text-align:center;
    text-shadow:1px 1px #DDD, -1px -1px #DDD, 1px -1px #DDD, -1px 1px #DDD;
}

.dt-button-collection a.buttons-columnVisibility span {
    margin-left:20px;    
}
/*--------------------------------------------------------------
this is for adding a check box before the colvis button group.
---------------------------------------------------------------*/
/*-------------------------------------------------
 Replace background image
-------------------------------------------------*/
button:not(.disabled).dt-button:hover, div:not(.disabled).dt-button:hover, a:not(.disabled).dt-button:hover {
	background-color: transparent!important;
	background-image: none!important;
	/*border: none!important;*/
	padding: 0px!important; 
  
}
button.dt-button, div.dt-button, a.dt-button{
	background-color: transparent!important;
	background-image: none!important;
	border: none!important; 
	padding: 0px!important;

   
}
.dt-button-collection > a{
	padding: 10px!important;
	/*border: 1px solid red!important;*/
	box-shadow: inset 1px 1px 3px #999999!important;
	background-color: #dddddd!important;

}
.dt-button-collection > a.dt-button:hover{
	padding: 10px!important;
	background-color: #dddddd!important;
	
}

	button:not(.disabled).dt-button:focus, div:not(.disabled).dt-button:focus, a:not(.disabled).dt-button:focus{
		background-color: transparent!important;
		background-image: none!important;
		border: none!important; 
		/*padding: 0px!important; */

}
button:not(.disabled).dt-button:active, button:not(.disabled).active.dt-button, div:not(.disabled).dt-button:active, div:not(.disabled).active.dt-button, a:not(.disabled).dt-button:active, a:not(.disabled).active.dt-button{
	box-shadow: inset 1px 1px 3px #999999!important;
}
/*-------------------------------------------------
 Replace background image
-------------------------------------------------*/


	</style>

</head>
<body class="wide comments example">
	<!-- <div id="abovecolvis"></div> -->
	<div>
				<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th class="sorting_disabled no-sort">First name</th>
							<th class="sorting_disabled no-sort">Last name</th>
							<th class="sorting_disabled">Position</th>
							<th class="sorting_disabled">Office</th>
							<th class="sorting_disabled">Age</th>
							<th class="sorting_disabled">Start date</th>
							<th class="sorting_disabled">Salary</th>
							<th class="sorting_disabled">Extn.</th>
							<th class="sorting_disabled">E-mail</th>
						</tr>
						
					</thead>
					<tbody>
						<tr>
							<td>Tiger</td>
							<td>Nixon</td>
							<td>System Architect</td>
							<td>Edinburgh</td>
							<td>61</td>
							<td>2011/04/25</td>
							<td>$320,800</td>
							<td>5421</td>
							<td>t.nixon@datatables.net</td>
						</tr>
						<tr>
							<td>Garrett</td>
							<td>Winters</td>
							<td>Accountant</td>
							<td>Tokyo</td>
							<td>63</td>
							<td>2011/07/25</td>
							<td>$170,750</td>
							<td>8422</td>
							<td>g.winters@datatables.net</td>
						</tr>
						<tr>
							<td>Ashton</td>
							<td>Cox</td>
							<td>Junior Technical Author</td>
							<td>San Francisco</td>
							<td>66</td>
							<td>2009/01/12</td>
							<td>$86,000</td>
							<td>1562</td>
							<td>a.cox@datatables.net</td>
						</tr>
						<tr>
							<td>Cedric</td>
							<td>Kelly</td>
							<td>Senior Javascript Developer</td>
							<td>Edinburgh</td>
							<td>22</td>
							<td>2012/03/29</td>
							<td>$433,060</td>
							<td>6224</td>
							<td>c.kelly@datatables.net</td>
						</tr>
						<tr>
							<td>Airi</td>
							<td>Satou</td>
							<td>Accountant</td>
							<td>Tokyo</td>
							<td>33</td>
							<td>2008/11/28</td>
							<td>$162,700</td>
							<td>5407</td>
							<td>a.satou@datatables.net</td>
						</tr>
						<tr>
							<td>Brielle</td>
							<td>Williamson</td>
							<td>Integration Specialist</td>
							<td>New York</td>
							<td>61</td>
							<td>2012/12/02</td>
							<td>$372,000</td>
							<td>4804</td>
							<td>b.williamson@datatables.net</td>
						</tr>
						<tr>
							<td>Herrod</td>
							<td>Chandler</td>
							<td>Sales Assistant</td>
							<td>San Francisco</td>
							<td>59</td>
							<td>2012/08/06</td>
							<td>$137,500</td>
							<td>9608</td>
							<td>h.chandler@datatables.net</td>
						</tr>
						<tr>
							<td>Rhona</td>
							<td>Davidson</td>
							<td>Integration Specialist</td>
							<td>Tokyo</td>
							<td>55</td>
							<td>2010/10/14</td>
							<td>$327,900</td>
							<td>6200</td>
							<td>r.davidson@datatables.net</td>
						</tr>
						<tr>
							<td>Colleen</td>
							<td>Hurst</td>
							<td>Javascript Developer</td>
							<td>San Francisco</td>
							<td>39</td>
							<td>2009/09/15</td>
							<td>$205,500</td>
							<td>2360</td>
							<td>c.hurst@datatables.net</td>
						</tr>
						<tr>
							<td>Sonya</td>
							<td>Frost</td>
							<td>Software Engineer</td>
							<td>Edinburgh</td>
							<td>23</td>
							<td>2008/12/13</td>
							<td>$103,600</td>
							<td>1667</td>
							<td>s.frost@datatables.net</td>
						</tr>
						<tr>
							<td>Jena</td>
							<td>Gaines</td>
							<td>Office Manager</td>
							<td>London</td>
							<td>30</td>
							<td>2008/12/19</td>
							<td>$90,560</td>
							<td>3814</td>
							<td>j.gaines@datatables.net</td>
						</tr>
						<tr>
							<td>Quinn</td>
							<td>Flynn</td>
							<td>Support Lead</td>
							<td>Edinburgh</td>
							<td>22</td>
							<td>2013/03/03</td>
							<td>$342,000</td>
							<td>9497</td>
							<td>q.flynn@datatables.net</td>
						</tr>
						<tr>
							<td>Charde</td>
							<td>Marshall</td>
							<td>Regional Director</td>
							<td>San Francisco</td>
							<td>36</td>
							<td>2008/10/16</td>
							<td>$470,600</td>
							<td>6741</td>
							<td>c.marshall@datatables.net</td>
						</tr>
						<tr>
							<td>Haley</td>
							<td>Kennedy</td>
							<td>Senior Marketing Designer</td>
							<td>London</td>
							<td>43</td>
							<td>2012/12/18</td>
							<td>$313,500</td>
							<td>3597</td>
							<td>h.kennedy@datatables.net</td>
						</tr>
						<tr>
							<td>Tatyana</td>
							<td>Fitzpatrick</td>
							<td>Regional Director</td>
							<td>London</td>
							<td>19</td>
							<td>2010/03/17</td>
							<td>$385,750</td>
							<td>1965</td>
							<td>t.fitzpatrick@datatables.net</td>
						</tr>
						<tr>
							<td>Michael</td>
							<td>Silva</td>
							<td>Marketing Designer</td>
							<td>London</td>
							<td>66</td>
							<td>2012/11/27</td>
							<td>$198,500</td>
							<td>1581</td>
							<td>m.silva@datatables.net</td>
						</tr>
						<tr>
							<td>Paul</td>
							<td>Byrd</td>
							<td>Chief Financial Officer (CFO)</td>
							<td>New York</td>
							<td>64</td>
							<td>2010/06/09</td>
							<td>$725,000</td>
							<td>3059</td>
							<td>p.byrd@datatables.net</td>
						</tr>
						<tr>
							<td>Gloria</td>
							<td>Little</td>
							<td>Systems Administrator</td>
							<td>New York</td>
							<td>59</td>
							<td>2009/04/10</td>
							<td>$237,500</td>
							<td>1721</td>
							<td>g.little@datatables.net</td>
						</tr>
						<tr>
							<td>Bradley</td>
							<td>Greer</td>
							<td>Software Engineer</td>
							<td>London</td>
							<td>41</td>
							<td>2012/10/13</td>
							<td>$132,000</td>
							<td>2558</td>
							<td>b.greer@datatables.net</td>
						</tr>
						<tr>
							<td>Dai</td>
							<td>Rios</td>
							<td>Personnel Lead</td>
							<td>Edinburgh</td>
							<td>35</td>
							<td>2012/09/26</td>
							<td>$217,500</td>
							<td>2290</td>
							<td>d.rios@datatables.net</td>
						</tr>
						<tr>
							<td>Jenette</td>
							<td>Caldwell</td>
							<td>Development Lead</td>
							<td>New York</td>
							<td>30</td>
							<td>2011/09/03</td>
							<td>$345,000</td>
							<td>1937</td>
							<td>j.caldwell@datatables.net</td>
						</tr>
						<tr>
							<td>Yuri</td>
							<td>Berry</td>
							<td>Chief Marketing Officer (CMO)</td>
							<td>New York</td>
							<td>40</td>
							<td>2009/06/25</td>
							<td>$675,000</td>
							<td>6154</td>
							<td>y.berry@datatables.net</td>
						</tr>
						<tr>
							<td>Caesar</td>
							<td>Vance</td>
							<td>Pre-Sales Support</td>
							<td>New York</td>
							<td>21</td>
							<td>2011/12/12</td>
							<td>$106,450</td>
							<td>8330</td>
							<td>c.vance@datatables.net</td>
						</tr>
						<tr>
							<td>Doris</td>
							<td>Wilder</td>
							<td>Sales Assistant</td>
							<td>Sidney</td>
							<td>23</td>
							<td>2010/09/20</td>
							<td>$85,600</td>
							<td>3023</td>
							<td>d.wilder@datatables.net</td>
						</tr>
						<tr>
							<td>Angelica</td>
							<td>Ramos</td>
							<td>Chief Executive Officer (CEO)</td>
							<td>London</td>
							<td>47</td>
							<td>2009/10/09</td>
							<td>$1,200,000</td>
							<td>5797</td>
							<td>a.ramos@datatables.net</td>
						</tr>
						<tr>
							<td>Gavin</td>
							<td>Joyce</td>
							<td>Developer</td>
							<td>Edinburgh</td>
							<td>42</td>
							<td>2010/12/22</td>
							<td>$92,575</td>
							<td>8822</td>
							<td>g.joyce@datatables.net</td>
						</tr>
						<tr>
							<td>Jennifer</td>
							<td>Chang</td>
							<td>Regional Director</td>
							<td>Singapore</td>
							<td>28</td>
							<td>2010/11/14</td>
							<td>$357,650</td>
							<td>9239</td>
							<td>j.chang@datatables.net</td>
						</tr>
						<tr>
							<td>Brenden</td>
							<td>Wagner</td>
							<td>Software Engineer</td>
							<td>San Francisco</td>
							<td>28</td>
							<td>2011/06/07</td>
							<td>$206,850</td>
							<td>1314</td>
							<td>b.wagner@datatables.net</td>
						</tr>
						<tr>
							<td>Fiona</td>
							<td>Green</td>
							<td>Chief Operating Officer (COO)</td>
							<td>San Francisco</td>
							<td>48</td>
							<td>2010/03/11</td>
							<td>$850,000</td>
							<td>2947</td>
							<td>f.green@datatables.net</td>
						</tr>
						<tr>
							<td>Shou</td>
							<td>Itou</td>
							<td>Regional Marketing</td>
							<td>Tokyo</td>
							<td>20</td>
							<td>2011/08/14</td>
							<td>$163,000</td>
							<td>8899</td>
							<td>s.itou@datatables.net</td>
						</tr>
						<tr>
							<td>Michelle</td>
							<td>House</td>
							<td>Integration Specialist</td>
							<td>Sidney</td>
							<td>37</td>
							<td>2011/06/02</td>
							<td>$95,400</td>
							<td>2769</td>
							<td>m.house@datatables.net</td>
						</tr>
						<tr>
							<td>Suki</td>
							<td>Burks</td>
							<td>Developer</td>
							<td>London</td>
							<td>53</td>
							<td>2009/10/22</td>
							<td>$114,500</td>
							<td>6832</td>
							<td>s.burks@datatables.net</td>
						</tr>
						<tr>
							<td>Prescott</td>
							<td>Bartlett</td>
							<td>Technical Author</td>
							<td>London</td>
							<td>27</td>
							<td>2011/05/07</td>
							<td>$145,000</td>
							<td>3606</td>
							<td>p.bartlett@datatables.net</td>
						</tr>
						<tr>
							<td>Gavin</td>
							<td>Cortez</td>
							<td>Team Leader</td>
							<td>San Francisco</td>
							<td>22</td>
							<td>2008/10/26</td>
							<td>$235,500</td>
							<td>2860</td>
							<td>g.cortez@datatables.net</td>
						</tr>
						<tr>
							<td>Martena</td>
							<td>Mccray</td>
							<td>Post-Sales support</td>
							<td>Edinburgh</td>
							<td>46</td>
							<td>2011/03/09</td>
							<td>$324,050</td>
							<td>8240</td>
							<td>m.mccray@datatables.net</td>
						</tr>
						<tr>
							<td>Unity</td>
							<td>Butler</td>
							<td>Marketing Designer</td>
							<td>San Francisco</td>
							<td>47</td>
							<td>2009/12/09</td>
							<td>$85,675</td>
							<td>5384</td>
							<td>u.butler@datatables.net</td>
						</tr>
						<tr>
							<td>Howard</td>
							<td>Hatfield</td>
							<td>Office Manager</td>
							<td>San Francisco</td>
							<td>51</td>
							<td>2008/12/16</td>
							<td>$164,500</td>
							<td>7031</td>
							<td>h.hatfield@datatables.net</td>
						</tr>
						<tr>
							<td>Hope</td>
							<td>Fuentes</td>
							<td>Secretary</td>
							<td>San Francisco</td>
							<td>41</td>
							<td>2010/02/12</td>
							<td>$109,850</td>
							<td>6318</td>
							<td>h.fuentes@datatables.net</td>
						</tr>
						<tr>
							<td>Vivian</td>
							<td>Harrell</td>
							<td>Financial Controller</td>
							<td>San Francisco</td>
							<td>62</td>
							<td>2009/02/14</td>
							<td>$452,500</td>
							<td>9422</td>
							<td>v.harrell@datatables.net</td>
						</tr>
						<tr>
							<td>Timothy</td>
							<td>Mooney</td>
							<td>Office Manager</td>
							<td>London</td>
							<td>37</td>
							<td>2008/12/11</td>
							<td>$136,200</td>
							<td>7580</td>
							<td>t.mooney@datatables.net</td>
						</tr>
						<tr>
							<td>Jackson</td>
							<td>Bradshaw</td>
							<td>Director</td>
							<td>New York</td>
							<td>65</td>
							<td>2008/09/26</td>
							<td>$645,750</td>
							<td>1042</td>
							<td>j.bradshaw@datatables.net</td>
						</tr>
						<tr>
							<td>Olivia</td>
							<td>Liang</td>
							<td>Support Engineer</td>
							<td>Singapore</td>
							<td>64</td>
							<td>2011/02/03</td>
							<td>$234,500</td>
							<td>2120</td>
							<td>o.liang@datatables.net</td>
						</tr>
						<tr>
							<td>Bruno</td>
							<td>Nash</td>
							<td>Software Engineer</td>
							<td>London</td>
							<td>38</td>
							<td>2011/05/03</td>
							<td>$163,500</td>
							<td>6222</td>
							<td>b.nash@datatables.net</td>
						</tr>
						<tr>
							<td>Sakura</td>
							<td>Yamamoto</td>
							<td>Support Engineer</td>
							<td>Tokyo</td>
							<td>37</td>
							<td>2009/08/19</td>
							<td>$139,575</td>
							<td>9383</td>
							<td>s.yamamoto@datatables.net</td>
						</tr>
						<tr>
							<td>Thor</td>
							<td>Walton</td>
							<td>Developer</td>
							<td>New York</td>
							<td>61</td>
							<td>2013/08/11</td>
							<td>$98,540</td>
							<td>8327</td>
							<td>t.walton@datatables.net</td>
						</tr>
						<tr>
							<td>Finn</td>
							<td>Camacho</td>
							<td>Support Engineer</td>
							<td>San Francisco</td>
							<td>47</td>
							<td>2009/07/07</td>
							<td>$87,500</td>
							<td>2927</td>
							<td>f.camacho@datatables.net</td>
						</tr>
						<tr>
							<td>Serge</td>
							<td>Baldwin</td>
							<td>Data Coordinator</td>
							<td>Singapore</td>
							<td>64</td>
							<td>2012/04/09</td>
							<td>$138,575</td>
							<td>8352</td>
							<td>s.baldwin@datatables.net</td>
						</tr>
						<tr>
							<td>Zenaida</td>
							<td>Frank</td>
							<td>Software Engineer</td>
							<td>New York</td>
							<td>63</td>
							<td>2010/01/04</td>
							<td>$125,250</td>
							<td>7439</td>
							<td>z.frank@datatables.net</td>
						</tr>
						<tr>
							<td>Zorita</td>
							<td>Serrano</td>
							<td>Software Engineer</td>
							<td>San Francisco</td>
							<td>56</td>
							<td>2012/06/01</td>
							<td>$115,000</td>
							<td>4389</td>
							<td>z.serrano@datatables.net</td>
						</tr>
						<tr>
							<td>Jennifer</td>
							<td>Acosta</td>
							<td>Junior Javascript Developer</td>
							<td>Edinburgh</td>
							<td>43</td>
							<td>2013/02/01</td>
							<td>$75,650</td>
							<td>3431</td>
							<td>j.acosta@datatables.net</td>
						</tr>
						<tr>
							<td>Cara</td>
							<td>Stevens</td>
							<td>Sales Assistant</td>
							<td>New York</td>
							<td>46</td>
							<td>2011/12/06</td>
							<td>$145,600</td>
							<td>3990</td>
							<td>c.stevens@datatables.net</td>
						</tr>
						<tr>
							<td>Hermione</td>
							<td>Butler</td>
							<td>Regional Director</td>
							<td>London</td>
							<td>47</td>
							<td>2011/03/21</td>
							<td>$356,250</td>
							<td>1016</td>
							<td>h.butler@datatables.net</td>
						</tr>
						<tr>
							<td>Lael</td>
							<td>Greer</td>
							<td>Systems Administrator</td>
							<td>London</td>
							<td>21</td>
							<td>2009/02/27</td>
							<td>$103,500</td>
							<td>6733</td>
							<td>l.greer@datatables.net</td>
						</tr>
						<tr>
							<td>Jonas</td>
							<td>Alexander</td>
							<td>Developer</td>
							<td>San Francisco</td>
							<td>30</td>
							<td>2010/07/14</td>
							<td>$86,500</td>
							<td>8196</td>
							<td>j.alexander@datatables.net</td>
						</tr>
						<tr>
							<td>Shad</td>
							<td>Decker</td>
							<td>Regional Director</td>
							<td>Edinburgh</td>
							<td>51</td>
							<td>2008/11/13</td>
							<td>$183,000</td>
							<td>6373</td>
							<td>s.decker@datatables.net</td>
						</tr>
						<tr>
							<td>Michael</td>
							<td>Bruce</td>
							<td>Javascript Developer</td>
							<td>Singapore</td>
							<td>29</td>
							<td>2011/06/27</td>
							<td>$183,000</td>
							<td>5384</td>
							<td>m.bruce@datatables.net</td>
						</tr>
						<tr>
							<td>Donna</td>
							<td>Snider</td>
							<td>Customer Support</td>
							<td>New York</td>
							<td>27</td>
							<td>2011/01/25</td>
							<td>$112,000</td>
							<td>4226</td>
							<td>d.snider@datatables.net</td>
						</tr>
					</tbody>
				</table>
			</div>
</body>
</html>

Open in new window

Capture-copy.JPG
Comment
Watch Question
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017
Commented:
This problem has been solved!
Unlock 1 Answer and 8 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE