Change function jQuery

Asked

Viewed 85 times

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 suit me and I can not disable it.

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

Follow the code below.

The external file referring to 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>

<link rel="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>

<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>

    <body>
            <center> <h1>Log das Integrações</h1> </center>
        <div class="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

2 answers

3

Deleting the part of the code that allows you to re-sort the table is risky, not to say impossible because that code is inserted inside the library that is the Datatable plugin. But the sensible thing is to configure the plugin to not sort the table. And that’s simple.

That method .dataTable() that starts the table accepts a configuration object. So it passes ordering: false and the option is disabled.

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

Working example:

<!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>

<link rel="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>

<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>

    <body>
    		<center> <h1>Log das Integrações</h1> </center>
        <div class="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>

  • We answered in the same minute with the same thing :) +1

2

Following the documentation of dataTable, just add:

"ordering": false in the datatable constructor.

Thus remaining:

<!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>

<link rel="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>

<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>

    <body>
    		<center> <h1>Log das Integrações</h1> </center>
        <div class="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>

  • We answered in the same minute with the same thing :) +1

Browser other questions tagged javascript jquery html5

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