为什么我的DataTable的排序无法关闭？

时间：2016-03-06 06:12:58

标签： javascript jquery datatables

我无法关闭订购。事实上，我无法使用JavaScript代码进行任何更改。这就是我所拥有的：

＆＃13;
＆＃13; 
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,b-1.1.2,r-2.0.2,sc-1.4.1/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,b-1.1.2,r-2.0.2,sc-1.4.1/datatables.min.js"></script>

<script>
    $(document).ready(function() {
        $('#example').dataTable()( {"ordering": "false"} );
    } );
</script>
＆＃13; 
#mainProduct {

    background-color: #E8E8E8;
    border: solid white;
}
.container {
  max-width: 100%;
  background-color: black;
  margin-left: 15px;
  text-align: center;
  position: relative;
}
.container div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}
.container img {
  width: 100%;
  height: auto;
}
.card-container {
  height: 200px;
  perspective: 600;
  position: relative;
  width: 200px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateY(180deg);
}
＆＃13; 
<div style="margin-top:20px; margin-left: 15px;">

  <!-- Product listings -->

  <table id="example" class="display" cellspacing="0" text-align="center">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </tfoot>

    <!-- T-REX COFFEE -->
    <tbody>

      <tr>
        <td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366446">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t12.deviantart.net/BrcRPOF9yezzdQA7qI0GGt9CQpA=/300x200/filters:fixed_height(100,100):origin()/pre02/0cc5/th/pre/i/2016/059/a/a/1_t_rex_coffee_by_mizoodesigns-d9tfftx.png">
              </div>
              <div class="side back">
                <p id="description">What better way to show you love coffee than with a prehistoric predator!</p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- TAFFY CAT BATUSI -->
        <td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366550">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t02.deviantart.net/_WQLrq--RN0K8ixtplOOzyahVko=/300x200/filters:fixed_height(100,100):origin()/pre14/aefe/th/pre/i/2016/059/b/7/14_taffycat_batusi_by_mizoodesigns-d9tfg15.png">
              </div>
              <div class="side back"><p id="description">What's better than Taffy Cat doing the Batusi? Taffy cat doing the Batusi on a t-shirt!</p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- SMILEY CONVERSE -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t12.deviantart.net/kxTUWMz6TsfYVFSd_YSycsGW70I=/300x200/filters:fixed_height(100,100):origin()/pre09/bbd1/th/pre/i/2016/059/8/f/36_smiley_red_shoe_by_mizoodesigns-d9tfg7p.png">
              </div>
              <div class="side back"><p id="description">Smiley red shoe. Because ... shoe!</p>
              </div>
            </div>
          </div>
          </a>
        </td>
      </tr>

      <tr>

        <!-- I'M BUFF -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t07.deviantart.net/UCKBK6KyJzceGbuB8szw-ucEZ2Y=/300x200/filters:fixed_height(100,100):origin()/pre09/a544/th/pre/i/2016/059/e/9/18_buff_by_mizoodesigns-d9tfq5g.png">
              </div>
              <div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- Curvy -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t08.deviantart.net/Lljv-RDFIKZCRuTf-GAxc0_BI0o=/300x200/filters:fixed_height(100,100):origin()/pre06/da78/th/pre/i/2016/059/7/c/19_curvy_by_mizoodesigns-d9tfqau.png">
              </div>
              <div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- Love female&female -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t01.deviantart.net/hGoyHjNSwG-HMyz4tBPYyWBJnD8=/300x200/filters:fixed_height(100,100):origin()/pre01/bc6e/th/pre/i/2016/059/c/8/42_love3_by_mizoodesigns-d9tfo91.png">
              </div>
              <div class="side back"><p id="description">Celebrate love and diversity!</p>
              </div>
            </div>
          </div>
          </a>
        </td>
      </tr>

      <tr>
        <!-- love male&male -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t04.deviantart.net/cgbfKcYI8e56QSdswTVHPMG8LOI=/300x200/filters:fixed_height(100,100):origin()/pre12/3e14/th/pre/i/2016/059/2/b/41_love2_by_mizoodesigns-d9tfo4w.png">
              </div>
              <div class="side back"><p id="description">Celebrate love and diversity!</p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- 420 Deadpool -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t08.deviantart.net/yUSAlWXmNVP8S_eBilkJrQVe3h0=/300x200/filters:fixed_height(100,100):origin()/pre01/9557/th/pre/i/2016/059/2/d/26_420pool_by_mizoodesigns-d9tfltp.png">
              </div>
              <div class="side back"><p id="description"></p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- Super Taffy Cat -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t07.deviantart.net/_ynkAcDVU3UrjIgmeUhz49Itxzs=/300x200/filters:fixed_height(100,100):origin()/pre10/c388/th/pre/i/2016/059/5/c/15_taffycat14_by_mizoodesigns-d9tfmhe.png">
              </div>
              <div class="side back"><p id="description"></p>
              </div>
            </div>
          </div>
          </a>
        </td>
      </tr>

      <tr>
        <!-- Taffy Cat book -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png">
              </div>
              <div class="side back"><p id="description"></p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- Prop of 420 -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png">
              </div>
              <div class="side back"><p id="description"></p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- All that list -->
        <td id="mainProduct"><a href="">
        <div class="card-container">
          <div class="card">
            <div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png">
            </div>
            <div class="side back"><p id="description"></p>
            </div>
          </div>
        </div>
        </a>
        </td>
      </tr>

      <tr>
        <!-- Taffy Cat book -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png">
              </div>
              <div class="side back"><p id="description"></p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- Prop of 420 -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png">
              </div>
              <div class="side back"><p id="description"></p>
              </div>
            </div>
          </div>
          </a>
        </td>

        <!-- All that list -->
        <td id="mainProduct"><a href="">
          <div class="card-container">
            <div class="card">
              <div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png">
              </div>
              <div class="side back"><p id="description"></p>
              </div>
            </div>
          </div>
          </a>
        </td>
      </tr>

    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

任何建议或想法都非常感激，一直在看着它，弄得太乱了，它让我发疯了。注意我对DataTables来说还是比较新的，如果这是一个非常愚蠢的错误，请提前抱歉。

1 个答案:

答案 0 :(得分：1)

初始化应该如下$('#example').DataTable({"ordering": false});。小写d，如datatable也适用。

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,b-1.1.2,r-2.0.2,sc-1.4.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,b-1.1.2,r-2.0.2,sc-1.4.1/datatables.min.js"></script>

<script>
$(document).ready(function() {
    $('#example').DataTable({"ordering": false});  
} );

</script>
#mainProduct {
    
    background-color: #E8E8E8;
    border: solid white;
}
.container {
  max-width: 100%;
  background-color: black;
  margin-left: 15px;
  text-align: center;
  position: relative;
}
.container div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}
.container img {
  width: 100%;
  height: auto;
}
.card-container {
  height: 200px;
  perspective: 600;
  position: relative;
  width: 200px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateY(180deg);
}
<div style="margin-top:20px; margin-left: 15px;">
<!-- Product listings -->

<table id="example" class="display" cellspacing="0" text-align="center">
<thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
<tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
<!--T-REX COFFEE-->
<tbody>
<tr>
 <td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366446">
   <div class="card-container">
    <div class="card">
     <div class="side"><img src="http://t12.deviantart.net/BrcRPOF9yezzdQA7qI0GGt9CQpA=/300x200/filters:fixed_height(100,100):origin()/pre02/0cc5/th/pre/i/2016/059/a/a/1_t_rex_coffee_by_mizoodesigns-d9tfftx.png">
     </div>
    <div class="side back">
     <p id="description">What better way to show you love coffee than with a prehistoric predator!</p>
    </div>
   </div>
 </div>
</a>
</td>

<!--TAFFY CAT BATUSI-->
<td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366550">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t02.deviantart.net/_WQLrq--RN0K8ixtplOOzyahVko=/300x200/filters:fixed_height(100,100):origin()/pre14/aefe/th/pre/i/2016/059/b/7/14_taffycat_batusi_by_mizoodesigns-d9tfg15.png">
  </div>
  <div class="side back"><p id="description">What's better than Taffy Cat doing the Batusi? Taffy cat doing the Batusi on a t-shirt!</p>
   </div>
 </div>
</div>
</a>
</td>

<!--SMILEY CONVERSE-->

<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t12.deviantart.net/kxTUWMz6TsfYVFSd_YSycsGW70I=/300x200/filters:fixed_height(100,100):origin()/pre09/bbd1/th/pre/i/2016/059/8/f/36_smiley_red_shoe_by_mizoodesigns-d9tfg7p.png">
  </div>
  <div class="side back"><p id="description">Smiley red shoe. Because ... shoe!</p>
   </div>
 </div>
</div>
</a>
</td>
</tr>
<tr>

<!--I'M BUFF-->

<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t07.deviantart.net/UCKBK6KyJzceGbuB8szw-ucEZ2Y=/300x200/filters:fixed_height(100,100):origin()/pre09/a544/th/pre/i/2016/059/e/9/18_buff_by_mizoodesigns-d9tfq5g.png">
  </div>
  <div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p>
   </div>
 </div>
</div>
</a>
</td>
<!--Curvy-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t08.deviantart.net/Lljv-RDFIKZCRuTf-GAxc0_BI0o=/300x200/filters:fixed_height(100,100):origin()/pre06/da78/th/pre/i/2016/059/7/c/19_curvy_by_mizoodesigns-d9tfqau.png">
  </div>
  <div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p>
   </div>
 </div>
</div>
</a>
</td>
<!--Love female&female-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t01.deviantart.net/hGoyHjNSwG-HMyz4tBPYyWBJnD8=/300x200/filters:fixed_height(100,100):origin()/pre01/bc6e/th/pre/i/2016/059/c/8/42_love3_by_mizoodesigns-d9tfo91.png">
  </div>
  <div class="side back"><p id="description">Celebrate love and diversity!</p>
   </div>
 </div>
</div>
</a>
</td>

</tr>

<tr>
<!--love male&male-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t04.deviantart.net/cgbfKcYI8e56QSdswTVHPMG8LOI=/300x200/filters:fixed_height(100,100):origin()/pre12/3e14/th/pre/i/2016/059/2/b/41_love2_by_mizoodesigns-d9tfo4w.png">
  </div>
  <div class="side back"><p id="description">Celebrate love and diversity!</p>
   </div>
 </div>
</div>
</a>
</td>
<!--420 Deadpool-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t08.deviantart.net/yUSAlWXmNVP8S_eBilkJrQVe3h0=/300x200/filters:fixed_height(100,100):origin()/pre01/9557/th/pre/i/2016/059/2/d/26_420pool_by_mizoodesigns-d9tfltp.png">
  </div>
  <div class="side back"><p id="description"></p>
   </div>
 </div>
</div>
</a>
</td>
<!--Super Taffy Cat-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t07.deviantart.net/_ynkAcDVU3UrjIgmeUhz49Itxzs=/300x200/filters:fixed_height(100,100):origin()/pre10/c388/th/pre/i/2016/059/5/c/15_taffycat14_by_mizoodesigns-d9tfmhe.png">
  </div>
  <div class="side back"><p id="description"></p>
   </div>
 </div>
</div>
</a>
</td>

</tr>

<tr>
<!--Taffy Cat book-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png">
  </div>
  <div class="side back"><p id="description"></p>
   </div>
 </div>
</div>
</a>
</td>
<!--Prop of 420-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png">
  </div>
  <div class="side back"><p id="description"></p>
   </div>
 </div>
</div>
</a>
</td>
<!--All that list-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png">
  </div>
  <div class="side back"><p id="description"></p>
   </div>
 </div>
</div>
</a>
</td>
</tr>

<tr>
<!--Taffy Cat book-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png">
  </div>
  <div class="side back"><p id="description"></p>
   </div>
 </div>
</div>
</a>
</td>
<!--Prop of 420-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png">
  </div>
  <div class="side back"><p id="description"></p>
   </div>
 </div>
</div>
</a>
</td>
<!--All that list-->
<td id="mainProduct"><a href="">
<div class="card-container">
 <div class="card">
  <div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png">
  </div>
  <div class="side back"><p id="description"></p>
   </div>
 </div>
</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>

相关问题
最新问题