problem with draw() method

HTML

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/dataTables.buttons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.0/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.dataTables.min.css">
<input type="button" value="sdfjklhsduof" onclick="return BindDetailJson();">


 <div id="divKhasra" class="col-sm-12 col-md-12 col-lg-12" style="display: none; max-height: 200px; overflow-y: scroll;">
                            <table id="example" class="display cell-border table-striped table-bordered" width="100%" cellspacing="0">
                         
                            </table>
                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 20px;">
                        </div>

                        <div id="divOwner" class="col-sm-12 col-md-12 col-lg-12" style="display: none; max-height: 200px; overflow-y: scroll;">

                            <table id="tblOwner" class="display cell-border table-striped table-bordered" width="100%" cellspacing="0">
                                
                            </table>

                        </div>

                        <div id="divClose" class="col-sm-12 col-md-12 col-lg-12" style="padding: 20px;display:none;">

CSS

.DisplayNone {
            display: none;
        }
          .vAlignCenter {
            vertical-align: top;
        }
        .closee {
            border: 2px solid gray;
            font-size: 25px;
            padding-left: 3px;
            padding-right: 3px;
            color: gray;
            cursor: default;
            font-weight:900;
        }

JavaScript

$('#submit-button').click(function(){
    try {
        debugger;
     
        var data = '{"KhataDetail":[{"vill_link":5034,"khata":"7","khasra":"305","garea":"1.1200","gplotnm":" ","gincludeno":" ","girrigation":" ","gincludecount":null,"goldkhata":7,"gowntype":211,"Exceptional":0,"oldkhasra":"305","srevrate":"7.00","ssoilarea":"1.1200","ssoilrev":"7.84","ssoilcd":21,"Soilnm":"बारानी 1","jimmanname":"खातेदार","MutationNo":"168"},{"vill_link":5034,"khata":"55","khasra":"74","garea":"0.4500","gplotnm":"","gincludeno":" ","girrigation":"","gincludecount":null,"goldkhata":54,"gowntype":211,"Exceptional":0,"oldkhasra":"74","srevrate":"4.00","ssoilarea":"0.4500","ssoilrev":"1.80","ssoilcd":22,"Soilnm":"बारानी 2","jimmanname":"खातेदार","MutationNo":"168"},{"vill_link":5034,"khata":"59","khasra":"423/147","garea":"0.3000","gplotnm":" ","gincludeno":" ","girrigation":" ","gincludecount":null,"goldkhata":43,"gowntype":211,"Exceptional":0,"oldkhasra":"423/","srevrate":"15.00","ssoilarea":"0.3000","ssoilrev":"4.50","ssoilcd":3,"Soilnm":"चाही 2","jimmanname":"खातेदार","MutationNo":"168"},{"vill_link":5034,"khata":"59","khasra":"425/210","garea":"0.2300","gplotnm":"","gincludeno":"","girrigation":"","gincludecount":null,"goldkhata":43,"gowntype":211,"Exceptional":0,"oldkhasra":"425/","srevrate":"5.00","ssoilarea":"0.2300","ssoilrev":"1.15","ssoilcd":31,"Soilnm":"जाव 3","jimmanname":"खातेदार","MutationNo":"168"},{"vill_link":5034,"khata":"59","khasra":"427/239","garea":"0.6200","gplotnm":"","gincludeno":"","girrigation":"","gincludecount":null,"goldkhata":46,"gowntype":211,"Exceptional":0,"oldkhasra":"427/","srevrate":"7.00","ssoilarea":"0.6200","ssoilrev":"4.34","ssoilcd":21,"Soilnm":"बारानी...