Dynamic table call using bootstrap

  <script>
    function draftRadfunction(){
    alert("modal page : Radiology Draft");
        var ajaxURL = "draftRadPageLoad.do";
        $.ajax({
            url : ajaxURL,
            success : function(result) {
                $("#pageModal_RDraft_azax").html(result);
            }           
        });
       
    }
 </script>




Now Edit Below process :
.........................................
<!--  ********** Start Modal azax page AND iNiTialize Process **********   -->
 <!--  ********** Start Modal azax page AND iNiTialize Process **********   -->
 <!--  * Radiology Draft *   -->
     <script>
    function draftRadfunction(){
    alert("modal page : Radiology Draft");
        var ajaxURL = "draftRadPageLoad.do";
        $.ajax({
            url : ajaxURL,
            success : function(result) {
                $("#pageModal_RDraft_azax").html(result);
            },
            complete : function() {
                dataTableInitializationRadDraftPAT1();
            }
           
        });
       
    }
 </script>



 <script>
function dataTableInitializationRadDraftPAT1() {
        var asInitVals = new Array();
        var oTable = $('#patDataTableDraft_1').dataTable({
            /*"oLanguage": {
                "sSearch": "Search all: "
            }*/
            "bDestroy" : true,
            "autoWidth" : false,
            "bScrollCollapse" : true,
            "bProcessing" : true,
            "bJQueryUI" : true

        });

        $("thead input").keyup(function() {
            /* Filter on the column (the index) of this element */
            oTable.fnFilter(this.value,$("thead input").index(this));
        });

        /*
         * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
         * the footer
         */
         $("thead input").each(function(i) {
            asInitVals[i] = this.value;
        });

         $("thead input").focus(function() {
            if (this.className == "search_init") {
                this.className = "";
                this.value = "";
            }
        });

         $("thead input").blur(function(i) {
            if (this.value == "") {
                this.className = "search_init";
                this.value = asInitVals[$("thead input").index(this)];
            }
        });
    }
  </script>
 




AND USE THIS js : jquery.dataTables.min.js
/**
 * @summary     DataTables
 * @description Paginate, search and sort HTML tables
 * @version     1.9.4
 * @file        jquery.dataTables.js
 * @author      Allan Jardine (www.sprymedia.co.uk)
 * @contact     www.sprymedia.co.uk/contact
 *
 * @copyright Copyright 2008-2012 Allan Jardine, all rights reserved.
 *
 * This source file is free software, under either the GPL v2 license or a
 * BSD style license, available at:
 *   http://datatables.net/license_gpl2
 *   http://datatables.net/license_bsd
 *
 * This source file is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
 * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
 *
 * For details please refer to: http://www.datatables.net
 */

/*jslint evil: true, undef: true, browser: true */
/*globals $, jQuery,define,_fnExternApiFunc,_fnInitialise,_fnInitComplete,_fnLanguageCompat,_fnAddColumn,_fnColumnOptions,_fnAddData,_fnCreateTr,_fnGatherData,_fnBuildHead,_fnDrawHead,_fnDraw,_fnReDraw,_fnAjaxUpdate,_fnAjaxParameters,_fnAjaxUpdateDraw,_fnServerParams,_fnAddOptionsHtml,_fnFeatureHtmlTable,_fnScrollDraw,_fnAdjustColumnSizing,_fnFeatureHtmlFilter,_fnFilterComplete,_fnFilterCustom,_fnFilterColumn,_fnFilter,_fnBuildSearchArray,_fnBuildSearchRow,_fnFilterCreateSearch,_fnDataToSearch,_fnSort,_fnSortAttachListener,_fnSortingClasses,_fnFeatureHtmlPaginate,_fnPageChange,_fnFeatureHtmlInfo,_fnUpdateInfo,_fnFeatureHtmlLength,_fnFeatureHtmlProcessing,_fnProcessingDisplay,_fnVisibleToColumnIndex,_fnColumnIndexToVisible,_fnNodeToDataIndex,_fnVisbleColumns,_fnCalculateEnd,_fnConvertToWidth,_fnCalculateColumnWidths,_fnScrollingWidthAdjust,_fnGetWidestNode,_fnGetMaxLenString,_fnStringToCss,_fnDetectType,_fnSettingsFromNode,_fnGetDataMaster,_fnGetTrNodes,_fnGetTdNodes,_fnEscapeRegex,_fnDeleteIndex,_fnReOrderIndex,_fnColumnOrdering,_fnLog,_fnClearTable,_fnSaveState,_fnLoadState,_fnCreateCookie,_fnReadCookie,_fnDetectHeader,_fnGetUniqueThs,_fnScrollBarWidth,_fnApplyToChildren,_fnMap,_fnGetRowData,_fnGetCellData,_fnSetCellData,_fnGetObjectDataFn,_fnSetObjectDataFn,_fnApplyColumnDefs,_fnBindAction,_fnCallbackReg,_fnCallbackFire,_fnJsonString,_fnRender,_fnNodeToColumnIndex,_fnInfoMacros,_fnBrowserDetect,_fnGetColumns*/

(/** @lends <global> */function( window, document, undefined ) {

(function( factory ) {
    "use strict";

    // Define as an AMD module if possible
    if ( typeof define === 'function' && define.amd )
    {
        define( ['jquery'], factory );
    }
    /* Define using browser globals otherwise
     * Prevent multiple instantiations if the script is loaded twice
     */
    else if ( jQuery && !jQuery.fn.dataTable )
    {
        factory( jQuery );
    }
}
(/** @lends <global> */function( $ ) {
    "use strict";
    /**
     * DataTables is a plug-in for the jQuery Javascript library. It is a
     * highly flexible tool, based upon the foundations of progressive
     * enhancement, which will add advanced interaction controls to any
     * HTML table. For a full list of features please refer to
     * <a href="http://datatables.net">DataTables.net</a>.
     *
     * Note that the <i>DataTable</i> object is not a global variable but is
     * aliased to <i>jQuery.fn.DataTable</i> and <i>jQuery.fn.dataTable</i> through which
     * it may be  accessed.
     *
     *  @class
     *  @param {object} [oInit={}] Configuration object for DataTables. Options
     *    are defined by {@link DataTable.defaults}
     *  @requires jQuery 1.3+
     *
     *  @example
     *    // Basic initialisation
     *    $(document).ready( function {
     *      $('#example').dataTable();
     *    } );
     * 

 


















/// DIRECT TABLE   id   iNiTiAliZE  in jsp page :
   <script type="text/javascript">
     $(document).ready(function (){
       dataTableInitializationPatientViewPAT();
     }); 





function dataTableInitializationPatientViewPAT() {
        var asInitVals = new Array();
        var oTable = $('#patViewDataTable3').dataTable({
            /*"oLanguage": {
                "sSearch": "Search all: "
            }*/
            "bDestroy" : true,
            "autoWidth" : false,
            "bScrollCollapse" : true,
            "bProcessing" : true,
            "bJQueryUI" : true

        });

        $("thead input").keyup(function() {
            /* Filter on the column (the index) of this element */
            oTable.fnFilter(this.value,$("thead input").index(this));
        });

        /*
         * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
         * the footer
         */
         $("thead input").each(function(i) {
            asInitVals[i] = this.value;
        });

         $("thead input").focus(function() {
            if (this.className == "search_init") {
                this.className = "";
                this.value = "";
            }
        });

         $("thead input").blur(function(i) {
            if (this.value == "") {
                this.className = "search_init";
                this.value = asInitVals[$("thead input").index(this)];
            }
        });
    }
</script>