dataTable serverside example

HTML

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<input type="text" value="test" class="name-highlight-hover input-test">

<!-- 
<div id="lorem">
    <div id="bkg"></div>
    Random Text
</div> -->

CSS

.input-test {
    display: block;
    margin: 0 0 0 auto;
    width: 169px;
    height: 34px;
    box-sizing: border-box;
    border: 2px solid green;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    color: $black;
    background-image: url(http://i.imgur.com/2LGbUV2.png);
    background-position: 130px 5px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
     -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

JavaScript

//$("input").css('background-image', 'none');



  $("input").css('background-image').fadeOut(500);


// $("input").stop().fadeOut("0", function () {
 //        $("input").css("background-image", //"url('http://dummyimage.com/100x100/000/ff0000')").fadeIn(1000);
  //  });
  
  

   

       $("input").css('background-image').fadeOut('3000');