0
Je crée un DataTable (interface utilisateur sémantique) dans lequel j'ai besoin de points d'arrêt personnalisés pour ma table. Je suis en train de changer la valeur de rupture au Code jsDataTable - Points d'arrêt personnalisés pour responsive
"breakpoints: [{ name: 'fablet', width: 768 }]"
à
breakpoints: [{ name: 'fablet', width: 650 }]
j'avais fait les changements dans mon code JS, mais cela ne fonctionne pas. Je ne sais pas ce que j'ai fait de mal.
J'ai eu checked la documentation DataSable JS pour les points d'arrêt de table sensibles.
Voici mon code:
$('#example').DataTable({
responsive: {
breakpoints: [
{ name: 'fablet', width: 650 }
]
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.semanticui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.semanticui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<table id="example" class="ui celled table" cellspacing="0" width="100%">
\t <thead>
\t \t <tr>
\t \t \t <th>S.No.</th>
\t \t \t <th>Author Name</th> \t \t \t
\t \t \t <th>Post Title</th>
\t \t \t <th>Published Date</th>
\t \t \t <th>Manage Ads</th>
\t \t </tr>
\t </thead>
\t <tbody>
\t \t <tr>
\t \t \t <td>01</td>
\t \t \t <td>Tiger Nixon</td> \t \t \t
\t \t \t <td>UI Developer</td>
\t \t \t <td>2011/04/25</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t <td>02</td> \t
\t \t \t <td>Garrett Winters</td>
\t \t \t <td>Accountant</td> \t \t \t \t \t
\t \t \t <td>2011/07/25</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>03</td> \t \t \t
\t \t \t <td>Ashton Cox</td>
\t \t \t <td>Junior Technical Author</td>
\t \t \t <td>2009/01/12</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>04</td> \t \t \t
\t \t \t <td>Cedric Kelly</td>
\t \t \t <td>Senior Javascript Developer</td>
\t \t \t <td>2012/03/29</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>05</td> \t \t \t
\t \t \t <td>Airi Satou</td>
\t \t \t <td>Accountant</td>
\t \t \t <td>2008/11/28</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>06</td> \t \t \t
\t \t \t <td>Brielle Williamson</td>
\t \t \t <td>Integration Specialist</td>
\t \t \t <td>2012/12/02</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>07</td> \t \t \t
\t \t \t <td>Herrod Chandler</td>
\t \t \t <td>Sales Assistant</td>
\t \t \t <td>2012/08/06</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>08</td> \t \t \t
\t \t \t <td>Rhona Davidson</td>
\t \t \t <td>Integration Specialist</td>
\t \t \t <td>2010/10/14</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>09</td> \t \t \t
\t \t \t <td>Colleen Hurst</td>
\t \t \t <td>Javascript Developer</td>
\t \t \t <td>2009/09/15</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>10</td> \t \t \t
\t \t \t <td>Sonya Frost</td>
\t \t \t <td>Software Engineer</td>
\t \t \t <td>2008/12/13</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>11</td> \t \t \t
\t \t \t <td>Jena Gaines</td>
\t \t \t <td>Office Manager</td>
\t \t \t <td>2008/12/19</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>12</td> \t \t \t
\t \t \t <td>Quinn Flynn</td>
\t \t \t <td>Support Lead</td>
\t \t \t <td>2013/03/03</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>13</td> \t \t \t
\t \t \t <td>Charde Marshall</td>
\t \t \t <td>Regional Director</td>
\t \t \t <td>2008/10/16</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>14</td> \t \t \t
\t \t \t <td>Haley Kennedy</td>
\t \t \t <td>Senior Marketing Designer</td>
\t \t \t <td>2012/12/18</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>15</td> \t \t \t
\t \t \t <td>Tatyana Fitzpatrick</td>
\t \t \t <td>Regional Director</td>
\t \t \t <td>2010/03/17</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>16</td> \t \t \t
\t \t \t <td>Michael Silva</td>
\t \t \t <td>Marketing Designer</td>
\t \t \t <td>2012/11/27</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>17</td> \t \t \t
\t \t \t <td>Paul Byrd</td>
\t \t \t <td>Chief Financial Officer (CFO)</td>
\t \t \t <td>2010/06/09</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>18</td> \t \t \t
\t \t \t <td>Gloria Little</td>
\t \t \t <td>Systems Administrator</td>
\t \t \t <td>2009/04/10</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>19</td> \t \t \t
\t \t \t <td>Bradley Greer</td>
\t \t \t <td>Software Engineer</td>
\t \t \t <td>2012/10/13</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t
\t \t </tr>
\t \t <tr>
\t \t \t <td>20</td> \t \t \t
\t \t \t <td>Dai Rios</td>
\t \t \t <td>Personnel Lead</td>
\t \t \t <td>2012/09/26</td>
\t \t \t <td>
\t \t \t \t <div class="ui buttons">
\t \t \t \t \t <button class="ui green button">Edit</button>
\t \t \t \t \t <div class="or"></div>
\t \t \t \t \t <button class="ui orange button">Delete</button>
\t \t \t \t </div> \t \t \t
\t \t \t </td> \t \t \t \t
\t \t </tr>
\t </tbody>
</table>