Datatable Page

Asked

Viewed 81 times

1

How do I correctly manipulate the dataTable, paging every 5 seconds?
I can even paginate, but when I increment the table it ends up stopping..

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>tabela Paulista</title>

  <style type="text/css" title="currentStyle">
    @import "Styles/demo_table.css";
  </style>

  <script type="text/javascript" language="javascript" src="Scripts/jquery.js"></script>
  <script type="text/javascript" language="javascript" src="Scripts/jquery.dataTables.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {

      var oTable = $('#paulista2013').dataTable();

      var i = 0;


      setTimeout(function() {

        oTable.fnPageChange(++i);
        alert(i);

      }, 3000);
    });
  </script>
</head>

<body>
  <h2>Campeonato Paulista - 2013</h2>
  <table id="paulista2013" border="1">
    <thead>
      <tr>
        <th>Classificacao</th>
        <th>Pontos</th>
        <th>Jogos</th>
        <th>Vitorias</th>
        <th>Empates</th>
        <th>Derrotas</th>
        <th>Gols-Pro</th>
        <th>Gols-Contra</th>
        <th>Saldo-Gols</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sao Paulo</td>
        <td>35</td>
        <td>15</td>
        <td>11</td>
        <td>2</td>
        <td>2</td>
        <td>29</td>
        <td>14</td>
        <td>15</td>
      </tr>
      <tr>
        <td>Ponte Preta</td>
        <td>34</td>
        <td>16</td>
        <td>9</td>
        <td>7</td>
        <td>0</td>
        <td>24</td>
        <td>11</td>
        <td>13</td>
      </tr>
      <tr>
        <td>Mogi Mirim</td>
        <td>33</td>
        <td>17</td>
        <td>10</td>
        <td>3</td>
        <td>4</td>
        <td>33</td>
        <td>18</td>
        <td>15</td>
      </tr>
      <tr>
        <td>Santos</td>
        <td>33</td>
        <td>17</td>
        <td>9</td>
        <td>6</td>
        <td>2</td>
        <td>29</td>
        <td>20</td>
        <td>9</td>
      </tr>
      <tr>
        <td>Corinthians</td>
        <td>29</td>
        <td>16</td>
        <td>7</td>
        <td>8</td>
        <td>1</td>
        <td>26</td>
        <td>14</td>
        <td>12</td>
      </tr>
      <tr>
        <td>Botafogo</td>
        <td>28</td>
        <td>16</td>
        <td>8</td>
        <td>4</td>
        <td>4</td>
        <td>23</td>
        <td>16</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Palmeiras</td>
        <td>28</td>
        <td>16</td>
        <td>7</td>
        <td>7</td>
        <td>2</td>
        <td>27</td>
        <td>20</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Penepolense</td>
        <td>27</td>
        <td>17</td>
        <td>8</td>
        <td>3</td>
        <td>6</td>
        <td>24</td>
        <td>19</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Linense</td>
        <td>24</td>
        <td>17</td>
        <td>6</td>
        <td>6</td>
        <td>5</td>
        <td>25</td>
        <td>25</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Bragantino</td>
        <td>24</td>
        <td>17</td>
        <td>6</td>
        <td>6</td>
        <td>5</td>
        <td>25</td>
        <td>27</td>
        <td>-2</td>
      </tr>
      <tr>
        <td>Oeste</td>
        <td>19</td>
        <td>17</td>
        <td>5</td>
        <td>4</td>
        <td>8</td>
        <td>21</td>
        <td>27</td>
        <td>-6</td>
      </tr>
      <tr>
        <td>XV de Piracicaba</td>
        <td>19</td>
        <td>17</td>
        <td>4</td>
        <td>7</td>
        <td>6</td>
        <td>26</td>
        <td>29</td>
        <td>-3</td>
      </tr>
      <tr>
        <td>Sao Bernardo</td>
        <td>17</td>
        <td>16</td>
        <td>4</td>
        <td>5</td>
        <td>7</td>
        <td>19</td>
        <td>26</td>
        <td>-7</td>
      </tr>
      <tr>
        <td>Paulista</td>
        <td>17</td>
        <td>17</td>
        <td>4</td>
        <td>5</td>
        <td>8</td>
        <td>15</td>
        <td>22</td>
        <td>-7</td>
      </tr>
      <tr>
        <td>Mirassol</td>
        <td>15</td>
        <td>16</td>
        <td>4</td>
        <td>3</td>
        <td>9</td>
        <td>26</td>
        <td>28</td>
        <td>-2</td>
      </tr>
      <tbody>
  </table>
</body>

</html>

html

1 answer

1


Good since no one answered, I solved it myself and am here posting the solution:

<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
			
			var i = 0;
			var pageInfo;	
	
			 var oTable =	$('#tabela').dataTable({ 
				 "infoCallback": function( settings, start, end, max, total, pre ) {
						var api = this.api();
						pageInfo = api.page.info();
					  },
					 "bPaginate": true,
	    		      "bJQueryUI": true,
				 	 	"bFilter": false,
						"bInfo": true,
				 		"bLengthChange": false,
					"pagingType": "simple_numbers",
					"lengthMenu": [[5, 6, 8, -1], [5, 6, 8, "Todos"]],
					  "language":{
						  "lengthMenu": "Mostrar _MENU_ por página",
						  "search":"Pesquisar:",
						  "info": "Mostrando _PAGE_ página de _PAGES_",
						 "paginate":{
							 "previous":"Ant",
							 "next": "Próx"
						 } 
					  },
				});
				
				
				var timeInterval = setInterval(function() { 
					
					oTable.fnPageChange(i++);
														   									   
				    if(i == pageInfo.pages){
					  i = 0;
					}
					   
				     }, 5000);
					
				$(document).on('mouseover', function() {
					if (timeInterval !== null) { 
						clearInterval(timeInterval);
					}
					
					 timeInterval = setInterval(function() {
					
					oTable.fnPageChange(i++);
					//
						if(i == pageInfo.pages){
						 i = 0;
						}
					
					}, 5000);
					
				});
		
					 



							} );
		</script>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.