Change jQuery function

Question

Change jQuery function

Navigation

#1 by (3 votes)
#2 by (2 votes)

3

I'm having a problem with a jquery code, I found a code almost perfect for my use, however, it has a function that does not fit me and I can not disable it.

This function is when I click on some column of thead (the ones that have two sets), the order of my table changes from ascending to descending, but for me, it is only disturbing. Instead of loading the script responsible for these functions as an external file, I saved it and load it internally to be able to change it, but I lack enough knowledge to be able to find that function in the middle of the code and erase it without harming the rest of the code . So if anyone can give me some help, I appreciate it.

Follow the code below.

The external file for the functions is: cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><linkrel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>

<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script><scripttype="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head><body><center><h1>LogdasIntegrações</h1></center><divclass="table-responsive" >
            <table id="minhaTabela" class="display table" width="100%">
        <thead>  
          <tr>  
            <th>ID</th>  
            <th>Nome</th>  
            <th>Valor</th>  
            <th>Erro</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>001</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>002</td>  
            <td>Charles</td>  
            <td>200</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>003</td>  
            <td>Sravani</td>  
            <td>400</td>  
            <td>Sim</td>  
          </tr>  
           <tr>  
            <td>004</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>005</td>  
            <td>Ingrid</td>  
            <td>800</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>006</td>  
            <td>Letícia</td>  
            <td>400</td>  
            <td>Sim</td>  
          </tr>  

           <tr>  
            <td>007</td>  
            <td>Ronaldo</td>  
            <td>800</td>  
            <td>Sim</td>  
          </tr>  
          <tr>  
            <td>008</td>  
            <td>Mike</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>009</td>  
            <td>Andrew</td>  
            <td>300</td>  
            <td>Sim</td>  
          </tr>  

            <tr>  
            <td>010</td>  
            <td>Stephen</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>011</td>  
            <td>Sara</td>  
            <td>400</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>012</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
        </tbody>  
</table>
        </div>
        <script>
$(document).ready(function(){
    $('#minhaTabela').dataTable();
});
</script>
    </body>
</html>

javascript jquery html5

asked by anonymous 15.10.2016 / 09:19

2 answers

How to iterate over a huge amount of records with scala sorm How to write this MySQL code correctly?

score 3 · Answer 1

Deleting the part of the code that allows re-ordering the table is risky, not to say impossible because this code is inserted inside the library which is the DataTable plugin. But the sensible thing is to configure the plugin not to sort the table. And that's simple.

This .dataTable() method that starts the table accepts a configuration object . This will pass ordering: false and the option will be disabled.

$(document).ready(function(){
    $('#minhaTabela').dataTable({ordering:  false});
});

Example to work:

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><linkrel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>

<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script><scripttype="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head><body><center><h1>LogdasIntegrações</h1></center><divclass="table-responsive" >
            <table id="minhaTabela" class="display table" width="100%">
        <thead>  
          <tr>  
            <th>ID</th>  
            <th>Nome</th>  
            <th>Valor</th>  
            <th>Erro</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>001</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>002</td>  
            <td>Charles</td>  
            <td>200</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>003</td>  
            <td>Sravani</td>  
            <td>400</td>  
            <td>Sim</td>  
          </tr>  
           <tr>  
            <td>004</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>005</td>  
            <td>Ingrid</td>  
            <td>800</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>006</td>  
            <td>Letícia</td>  
            <td>400</td>  
            <td>Sim</td>  
          </tr>  
          
           <tr>  
            <td>007</td>  
            <td>Ronaldo</td>  
            <td>800</td>  
            <td>Sim</td>  
          </tr>  
          <tr>  
            <td>008</td>  
            <td>Mike</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>009</td>  
            <td>Andrew</td>  
            <td>300</td>  
            <td>Sim</td>  
          </tr>  
          
            <tr>  
            <td>010</td>  
            <td>Stephen</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>011</td>  
            <td>Sara</td>  
            <td>400</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>012</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
        </tbody>  
</table>
        </div>
        <script>
$(document).ready(function(){
    $('#minhaTabela').dataTable({ordering:  false});
});
</script>
    </body>
</html>

score 2 · Answer 2

Following documentation of dataTable , simply add:

"ordering": false in the dataTable constructor.

Looking like this:

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><linkrel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>

<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script><scripttype="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head><body><center><h1>LogdasIntegrações</h1></center><divclass="table-responsive" >
            <table id="minhaTabela" class="display table" width="100%">
        <thead>  
          <tr>  
            <th>ID</th>  
            <th>Nome</th>  
            <th>Valor</th>  
            <th>Erro</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>001</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>002</td>  
            <td>Charles</td>  
            <td>200</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>003</td>  
            <td>Sravani</td>  
            <td>400</td>  
            <td>Sim</td>  
          </tr>  
           <tr>  
            <td>004</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>005</td>  
            <td>Ingrid</td>  
            <td>800</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>006</td>  
            <td>Letícia</td>  
            <td>400</td>  
            <td>Sim</td>  
          </tr>  
          
           <tr>  
            <td>007</td>  
            <td>Ronaldo</td>  
            <td>800</td>  
            <td>Sim</td>  
          </tr>  
          <tr>  
            <td>008</td>  
            <td>Mike</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>009</td>  
            <td>Andrew</td>  
            <td>300</td>  
            <td>Sim</td>  
          </tr>  
          
            <tr>  
            <td>010</td>  
            <td>Stephen</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>011</td>  
            <td>Sara</td>  
            <td>400</td>  
            <td>Não</td>  
          </tr>  
          <tr>  
            <td>012</td>  
            <td>Davi</td>  
            <td>300</td>  
            <td>Não</td>  
          </tr>  
        </tbody>  
</table>
        </div>
        <script>
$(document).ready(function(){
    $('#minhaTabela').dataTable({
         "ordering": false
    });
});
</script>
    </body>
</html>