Jquery Datatable plugin not working when page PostBacks

Question

Hi in my application, I have Grid view control in that i am using searching based on column in that i am using data table plug-in.when my page is post back data table plug-in is not working

My code is:

<script type="text/javascript" src="DataTable/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="DataTable/jquery.dataTables.min.js"></script>

<script>

$(function () {

// Setup - add a text input to each footer cell

$('#<%=GridView1.ClientID %> th').each(function () {

var title = $(this).text();

if (title == "A Name" || title == " Name" || title == "ttl") {

$(this).html(title + '<br/><input type="text" style="width:120px" placeholder="Search ' + title + '" />');

}

else {

if (title != " ") {

//$(this).html(title + '<br/><input type="text" style="background-color:#646464;border:none" disabled="disabled" />');

}

}

});

// DataTable

var table = $('#<%=GridView1.ClientID %>').DataTable({

"paging": true,

"ordering": false,

"info": false,

"pageLength": 10,

"bLengthChange": false

});

table.columns().every( function () {

var that = this;

$( 'input', this.header() ).on( 'keyup change', function () {

if ( that.search() !== this.value ) {

that

.search( this.value )

.draw();

}

} );

} );

} );

</script>

 

Thank you