How to hide the column-toggle button from the table?

Montiyago picture Montiyago · Jul 23, 2013 · Viewed 11k times · Source

I want to hide the column-toggle button or column chooser button from the table appears above the table. I am using the jQuery Mobile ver. 1.3.2.

i'm using this:

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
 <thead class="pearlHeading">
  <tr>
   <th data-priority="1">S.No.</th>
   <th >Name of the Programme</th>
   <th data-priority="2">Campus</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

I remove the

data-role="table" id="table-column-toggle" data-mode="columntoggle"

but its not working properly

Answer

Himanshu Dhiraj Mishra picture Himanshu Dhiraj Mishra · Mar 13, 2015

Mine more professional, Use :

data-mode="columntoggle:none"

Working Example:

<!DOCTYPE html>
<html>

<head>
  <title>jQM Complex Demo</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>
  <div data-role="page" id="index">
    <div data-theme="b" data-role="header">
      <h1>Index page</h1>
    </div>

    <div data-role="content">
      <table data-role="table" id="table-column-toggle" data-mode="columntoggle:none" class="ui-responsive table-stroke">
        <thead class="pearlHeading">
          <tr>
            <th data-priority="1">S.No.</th>
            <th>Name of the Programme</th>
            <th data-priority="2">Campus</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

http://jsfiddle.net/Lsoesxtv/1/