$(document).ready(function() {

    // run this event handler once to init table

    $("#example").one("preInit.dt", function(){

        // remove the current handler.

        $(".dataTables_filter input[type='search']").off();

        // just for fun, completely change the search box to a boostrap layout

        // however you can just add the button to existing code by 

        /*

           $(".dataTables_filter input[type='search']").after("<button type='button'>Go</button>");

        */

          // replace the current search with bootstrap styled search

          $(".dataTables_filter").html(

              '<div style="width:320px" class="input-group">' +

              '<input type="search" class="form-control" placeholder="Search for...">' +

              '<span class="input-group-btn">' +

              '<button class="btn btn-primary" type="button">' +

              '<i class="fa fa-search fa-xs"></i></button>'+

              '</span>' +

              '</div>'

          );

          // set variable for ease below

          var sbox =  $(".dataTables_filter input[type='search']")

​

        // button event handler

        $(".dataTables_filter button").on("click", function(){

            $("#example").DataTable().search(sbox.val()).draw();

        });

        // Enter key  handler 

        sbox.on("keydown", function(evtObj){

            if(evtObj.keyCode == 13){

                $("#example").DataTable().search(sbox.val()).draw();

            }

        });

    });

​

    var table = $('#example').dataTable( {

        "ajax":{

            url:"//jsbin.com/zezakap/3.json",

            dataType:"json",

​

            error:function(err){debugger;}

        },

        "columns": [

            { "data": "name" },

            { "data": "position" },

            { "data": "office" },

            { "data": "extn" },

            { "data": "start_date" },

            { "data": "salary" }

        ]

    } );

​

} );