How to change my icon by clicking jquery DATATABLES?

Navigation
0

I have a table which I have put an image as an icon (+) <--"abrir" , which when you click there throws me a child.rows showing more information, what I want is that by clicking automatically I change the image or icon for (-) <--"cerrar" and likewise if I close the previous image or icon again (+) ...

CODE
Here I show the arrangement of the data brought from mysql 

for (var i = result.length -1; i >= 0; i--)
        {
            var rowNode = db_vigencias
            .row.add([
                        result[i].descripcion,
                        '<center><img class="details-open" src="../template/images/details_open.png"></center>',<--Esta es la imagen con forma de icono (+) -->
                        result[i].vigencia_inicial,
                        result[i].vigencia_final,
                    ])
                .draw()
           .node();
        }

Here I say, that when I click on the icon which would be the "details-open" class, I made a validation so that in a function it shows me the data I require. 

$('#db_vigencias tbody').on('click', '.details-open', function ()
{
    var tr = $(this).closest('tr');
    var row = db_vigencias.row( tr );


    if ( row.child.isShown() ) {
        // Esta fila ya está abierta - cerrarla
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Abrir esta fila
        row.child( format(row.data()) ).show();
        tr.addClass('shown')//intente poner o agregar este pedazo pero no funciono//.css('background','url(' + imageUrl + ')');
    }
} );

Here I show all the data I need .. 

function format ( data ) {
    // 'd' is the original data object for the row   
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td><b>DESCRIPCION:</b></td>'+
            '<td>'+data[0]+'</td>'+
        '</tr>'+
    '</table>';
}

I would appreciate your help ...

details-open.png = image icon (+) open;
details-closed.png = closed icon image (-);

    
asked by JDavid 01.03.2017 в 15:00
source

3 answers

2

I would keep things simple. I would simply have a span.icon that has a default background image of the closed icon and, if you add the class open , change the image to the open one. 

$('.details .icon').on('click', function() {
  $(this).parent().parent().toggleClass('open');
});
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');


*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.details {
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .25), 0 -1px 1px 0 rgba(0, 0, 0, .1);
  margin: 20px auto;
  overflow: hidden;
  width: 250px;
}

.details.open .icon {
  background-image: url('http://i.imgur.com/EwOiOd7.jpg');
}

.details.open .details-body {
  display: block;
}

.details-header {
  padding: 5px 10px;
}

.details-header .icon {
  background-image: url('http://i.imgur.com/gG37MbT.png');
  background-size: cover;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  width: 30px;
}

.details-body {
  display: none;
  padding: 10px;
}

.details-body p {
  color: #555;
  font-family: 'Noto Sans';
  font-size: 14px;
  text-align: justify;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="details">
  <header class="details-header">
    <span class="icon"></span>
  </header>
  <article class="details-body">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellendus eveniet voluptatibus necessitatibus similique porro soluta doloribus suscipit hic. Officiis in obcaecati ea ipsam, nisi. Debitis beatae, fugit officia ullam.
    </p>
  </article>
</div>

Note: I have put an example HMTL code since you did not display the HTML in your question.

    
answered by 01.03.2017 в 16:43
0

Consider placing a ID to the image type HTML tag.

Example: 

// Nota que al crear el HTML, estoy estableciendo el id al elemento "IMG":
for (var i = result.length -1; i >= 0; i--)
{
    var rowNode = db_vigencias
    .row.add([
                result[i].descripcion,
                '<center><img class="details-open" id="miImagenID_' + i + '" src="../template/images/details_open.png"></center>',<--Esta es la imagen con forma de icono (+) -->
                result[i].vigencia_inicial,
                result[i].vigencia_final,
            ])
        .draw()
   .node();
}

Then, in your code, look for the image with a certain ID and change the value of the property src ; something like:

In your onclick function: 

$('#db_vigencias tbody').on('click', '.details-open', function ()

Place the following: 

// Aquí el Id de tu elemento "img" es "miImagenID_1".
// En este punto, le cambias el valor "SRC" del elemento "IMG".
document.getElementById('miImagenID_1').src = "../details_closed.png";
    
answered by 01.03.2017 в 15:18
0
$(document).ready(function () {
    $(".dropdown").on("show.bs.dropdown", function (event) {
        $(this).find('.icono-desplegable').addClass("glyphicon-chevron-up");
        $(this).find('.icono-desplegable').removeClass("glyphicon-chevron-down");
    });
    $(".dropdown").on("hide.bs.dropdown", function (event) {
        $(this).find('.icono-desplegable').removeClass("glyphicon-chevron-up");
        $(this).find('.icono-desplegable').addClass("glyphicon-chevron-down");
    });
});

I use jQuery to make a change of icons (although of course, I use glyphicons), although you can implement something like this ... 

$(document).ready(function () {
      $("#btn-exp").on("click", function () {
          $(this).toggleClass("icono-cerrado");
          $(this).toggleClass("glyphicon glyphicon-collapse-down");
          $(this).toggleClass("glyphicon glyphicon-collapse-up");
          $(this).toggleClass("icono-abierto");
      });
  });
#btn-exp{
  height: 50px;
  width: 50px;
}
.icono-abierto 
{
  background-color: cyan;
  background-image: url('img/icono-abierto.png');
}

.icono-cerrado 
{
  background-color: red;
  background-image: url('img/icono-cerrado.png');
}
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="btn-exp" class="icono-cerrado glyphicon glyphicon-collapse-down
" onclick=""></div>

I included a portion of the code so that you understand the idea. I hope it helps you

    
answered by 01.03.2017 в 15:53
Obtain data- from a checkbox and when selected show data value- in a [duplicate] input c ++ templates syntax