Datatables.net Long lines

PlaceHolder fallback Example

by aljordan82

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>
<input id="filter" placeholder="Search"/>

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

CSS

.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());
})


var dataTable = $(".grid").dataTable({
    bFilter: true,
    bDeferRender: true,
    bProcessing: false,
    sDom: "t",
    aaData: [
                [
                    "12345",
                    "01/09/2013",
                    "04/09/2013",
                    "07/09/2013",
                    "lexeRoy"
                ],
                [
                    "67890",
                    "02/09/2013",
                    "03/09/2013",
                    "04/09/2013",
                    "myName"
                ]
            ],
    aoColumns: [
        { sTitle: "ID", mData: function(data,d) {
            return data[0]
          } },
        { sTitle: "date", mData: function(data,d) {
            return data[1]
          }
        },
        { sTitle: "Name",mData: function(data,d) {
            return data[4]
          }
        }
    ]
});



//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();
      }
    });
  });
}