Check ID of DataTable

tender

Hi everyone,

i am quite bad in JavaScript and i would like to ask stupid question, so sorry for that. I am using code below and i have two buttons which are used for hiding some rows (it works by adding data-user attribute to <tr> element). Problem is that hiding button works on all tables on loaded page. I need that buttons to work onlyl on specific table, so i need condition like. Thank you for your help.

<script>
 If(dataTableId = "projekty") {

//should hide rows after load by "default"
  
$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        return $(oTable.row(dataIndex).node()).attr('data-user') != 1;
      }
  );
  oTable.draw();

// should hide rows on click

    $("#hide").click(function() {
        $.fn.dataTable.ext.search.push(
          function(settings, data, dataIndex) {
              return $(oTable.row(dataIndex).node()).attr('data-user') != 1;
            }
        );
        oTable.draw();
    });
 
// should reset rows on click

   $("#reset").click(function() {
        $.fn.dataTable.ext.search.pop();
        oTable.draw();
    });

 } 
</script>

Code which i am using:

<script>

(function() {
  var _div = document.createElement('div');
  jQuery.fn.dataTable.ext.type.search.html = function(data) {
    _div.innerHTML = data;
    return _div.textContent ?
      _div.textContent
        .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a')
        .replace(/[çÇ]/g, 'c')
        .replace(/[ďĎ]/g, 'd')
        .replace(/[éÉèÈêÊëË]/g, 'e')
        .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i')
        .replace(/[ñÑňŇ]/g, 'n')
        .replace(/[óÓòÒôÔöÖœŒ]/g, 'o')
        .replace(/[řŘ]/g, 'r')
        .replace(/[šŠ]/g, 's')
        .replace(/[ťŤ]/g, 't')
        .replace(/[úÚùÙûÛüÜ]/g, 'u')
        .replace(/[ýÝŷŶŸÿ]/g, 'n')
        .replace(/[žŽ]/g, 'z') :
      _div.innerText
        .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a')
        .replace(/[çÇ]/g, 'c')
        .replace(/[ďĎ]/g, 'd')
        .replace(/[éÉèÈêÊëË]/g, 'e')
        .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i')
        .replace(/[ñÑňŇ]/g, 'n')
        .replace(/[óÓòÒôÔöÖœŒ]/g, 'o')
        .replace(/[řŘ]/g, 'r')
        .replace(/[šŠ]/g, 's')
        .replace(/[ťŤ]/g, 't')
        .replace(/[úÚùÙûÛüÜ]/g, 'u')
        .replace(/[ýÝŷŶŸÿ]/g, 'n')
        .replace(/[žŽ]/g, 'z');
  };
})();


$(document).ready(function() {
  var oTable = $('#projekty').DataTable({
    "scrollX": false,
    "pageLength": 10,
    "bLengthChange": true,
    "columnDefs": [{
      "type": "html",
      "targets": '_all',


    }],



  dom: '<"row"<"pull-right" f><"col-xs-4" l><"col-xs-4" B>rtip>',


   buttons: [
       {
           extend: 'excelHtml5',
           title: '<?php echo "Projekty"; ?>'
       },
       {
           extend: 'pdfHtml5',
           orientation: 'portrait',
           title: '<?php echo "Projekty"; ?>'
       }
   ],
   columnDefs: [
                 { type: 'de_date', targets: 2 },
                 { type: 'de_date', targets: 3 },
                 { "searchable": false, "targets": 6 }
                 ]



  });


  // Odstranění offline projektů
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        return $(oTable.row(dataIndex).node()).attr('data-user') != 1;
      }
  );
  oTable.draw();

 // Remove accented character from search input as well


    $('#projekty_filter input[type=search]').keyup( function () {

        oTable.search(
            jQuery.fn.DataTable.ext.type.search.html(this.value)
        ).draw();
    } );

    $("#hide").click(function() {
        $.fn.dataTable.ext.search.push(
          function(settings, data, dataIndex) {
              return $(oTable.row(dataIndex).node()).attr('data-user') != 1;
            }
        );
        oTable.draw();
    });
    $("#reset").click(function() {
        $.fn.dataTable.ext.search.pop();
        oTable.draw();
    });

});


</script>

tangerine

If(dataTableId = "projekty") {

That is wrong. That code is assigning a value, where you actually want a comparison.

If(dataTableId == "projekty") {

colin

Note also the capitalised "If"...

tender

I did what u wrote, but datatables wont inicialize at all.
I made up that condition for illustrating what i need to do.. But thanks for help anyway!

colin

if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

tender

@Colin thanks, i should read that before post.

Here is example:

http://live.datatables.net/nolapihi/2/edit

After hitting "Run with JS" u can click on buttons "hide" and "reset". One record of first table has in <tr> element "data-user"=1 attribute, second table doesnt have it. But it hiding record anyway. I need to assign "hiding" event only to first table, but leave second table intact. I thought it could be done by pointing that to table id.

Ithough this one
var oTable = $('#projekty').DataTable({

gonna define oTable as variable for #projekty id table, but it works on both tables which are inicialized... If you can see i have same amount of records in both tables, but in second one is missing record "Tiger Nixon" which is hided permanently no matter u click on reset button...

tender

Well i solved that. Its not elegant solution but if u saw my scripts they are not elegant as well .

I just put table into seperate php file and then load it by jquery, so other tables on the page are intact..:

<script>
$(function() {
    $('#mySlowTable').load("yourTableFile.php");
});
</script>

<div id="mySlowTable">
    Your loading image here
</div>

https://stackoverflow.com/questions/24302624/how-do-i-load-a-php-page-after-the-page-has-fully-loaded