Datatables.net

PlaceHolder fallback Example

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<p>Placeholder fallback that doesn't conflict with real input field</p>
<p>Search for 1234 using IE9 or any browser that doesn't support placeholders</p>

<input id="filter" placeholder="Search"/>

<div class="container">
    <table class="grid"></table>
</div>

CSS

.placeholder { color :#aaa;}


.dataTable {
    width: 100% !important;
    margin: 0;
}

.dataTables_wrapper {
    position: relative;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}



.container {
    position: relative;
    width: 70%;
}

.container .grid {
    position: relative;
    overflow-x: hidden;
}

JavaScript

$("#filter").keyup(function(){
    
    dataTable.fnFilter($(this).val())

})





  //place holder fallback 
var testInput = document.createElement('input');
var placeholderSupport = ("placeholder" in testInput);

if(!placeholderSupport){

  
  $('input[placeholder]').each(function (index, current) {
    var $real = $(this);
    var placeHolderValue = $real.attr("placeholder");
    var classes = $real.attr("class");
    $fakeInput = $("<input>").attr({"type": "text"}).val(placeHolderValue).addClass('placeholder fake-input' , classes )

    $fakeInput.insertBefore($real);
    $real.hide();
    $fakeInput.focus(function() {
      $(this).blur().hide()
      .next().show().focus();
    });
    
    $real.blur(function () {
      if ($(this).val() == '') {
        $(this).hide()
        .prev().show();
      }
    });
  });
}