conflict between JavaScript files

Question

Hello i have a problem in the conflict between the JavaScript files in the my project clearly the problem is as follows

In my admin panel all users are showing on a Bootstrap table where I can sort it. There are also a pagination system. Looks Good.

I want a system => Make the full row as a button and after click on the row it's should be show a collapse hidden information "bellow the each row" where I will put users information.

i'm using sb admin v2 link and this code will add to table file

$(document).ready(function() {

            /*
             * Initialse DataTables, with no sorting on the 'details' column
             */
            var oTable = $('#example').dataTable({
                "aoColumnDefs" : [{
                    "bSortable" : false,
                    "aTargets" : [0]
                }],
                "aaSorting" : [[1, 'asc']]
            });
            $('#example tbody td ').live('click', function() {
                var nTr = $(this).parents('tr')[0];
                if (oTable.fnIsOpen(nTr)) {
                    /* This row is already open - close it */
                    this.src = "../examples_support/details_open.png";
                    oTable.fnClose(nTr);
                } else {
                    /* Open this row */
                    this.src = "../examples_support/details_close.png";
                    oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
                }
            });
        });

Answer 1

You put the below code in every datatable called in pages.

$('#example tbody td ').live('click', function() {
                var nTr = $(this).parents('tr')[0];
                if (oTable.fnIsOpen(nTr)) {
                    /* This row is already open - close it */
                    this.src = "../examples_support/details_open.png";
                    oTable.fnClose(nTr);
                } else {
                    /* Open this row */
                    this.src = "../examples_support/details_close.png";
                    oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
                }
            });

For Ex:

<table id="example">
<tr>
<td></td>
</tr>
</table>
<script>
 $('#example tbody td ').live('click', function() {
                    var nTr = $(this).parents('tr')[0];
                    if (oTable.fnIsOpen(nTr)) {
                        /* This row is already open - close it */
                        this.src = "../examples_support/details_open.png";
                        oTable.fnClose(nTr);
                    } else {
                        /* Open this row */
                        this.src = "../examples_support/details_close.png";
                        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
                    }
                });
</script> 

or using on instead of live.

Thanks.