datatable is not working.. someone help me

sowmya1989.sit@gmail.com

jquery code

function loadAllWarehouse() {
    var getallWarehouse = JSON.stringify('ggg');
    $.ajax({
        url: "loadWarehouse",
        type: "POST",
        cache: false,
        data: {
            loadByUserId: getallWarehouse
        },
        dataType: "json",
        success: function (jsnResponse) {
            console.log(jsnResponse);
            if (jsnResponse.status) {
                $('.tbl-warehouse tbody tr').remove();
                var warehouseList = jsnResponse.warehouseList;
                console.log(warehouseList);
                    for (i = 0; i < warehouseList.length; i++) {

                        var lst = '<tr warehouseId=' + warehouseList[i].warehouseId + '><td>' + (i + 1) + '</td><td>' +
                            warehouseList[i].code + '</td><td>' + warehouseList[i].address + '</td><td>' + warehouseList[i].no_of_stores + '</td><td>' + warehouseList[i].capacity +
                            '</td></tr>';

                        $('.tbl-warehouse tbody').append(lst);
                        
                        console.log(lst)
                    }
            } 
        },
        error: function (err) {
            console.log("error occured");
        }
    });
}

html

<table id="example" class="table table-bordered table-striped tbl-warehouse
                                    ">
            <thead>
                <tr>
                   <th>Sl No.</th>
                   <th>Code</th>
                   <th>Address</th>
                   <th>NUMBER OF STORES</th>
                   <th>CAPACITY</th>
                 
                   
                </tr>
            </thead>
            <tbody>
             
       
               
            </tbody>
            <tfoot>
                <tr>
                   <th>Sl No.</th>
                   <th>Code</th>
                   <th>Address</th>
                   <th>NUMBER OF STORES</th>
                   <th>CAPACITY</th>
                   
                   
                </tr>
            </tfoot>
        </table>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

sowmya1989.sit@gmail.com

Anyone pls help me.. It will be great help..

colin

Hi @sowmya1989.sit@gmail.com ,

I can't see any code where you're initialising the DataTable - I would suggest looking at that first. If no joy, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

sowmya1989.sit@gmail.com

https://jsfiddle.net/t84ec30z/1/

HERE IS THE JS FIDDLE LINK

sowmya1989.sit@gmail.com

Anyone pls help me...

tangerine

As Colin already said:

I can't see any code where you're initialising the DataTable - I would suggest looking at that first.

sowmya1989.sit@gmail.com

Hi tangerine,

I initialized datatables. It is display data but search sort pagination is not working. Can you pls help if possible.

function loadAllWarehouse() {
    $('#example').DataTable({
         "bProcessing": true,
         "serverSide": true,
         "dataType": "json",
         "ajax":{
            url: "loadWarehouse", 
            type: "post",  
            "dataSrc": function (jsnResponse) {
                var return_data = new Array();
                console.log(jsnResponse);
                var warehouseList = 0;
                if (jsnResponse.status) {
                var warehouseList = jsnResponse.warehouseList;
               for (i = 0; i < warehouseList.length; i++) {
                    return_data.push({
                        
                        'warehouseId':  i+1,
                        'code': warehouseList[i].code,
                        'address': warehouseList[i].address,
                        'no_of_stores': warehouseList[i].no_of_stores,
                        'capacity': warehouseList[i].capacity
                        })
              }
              return return_data;
            }
         
          }
         },
   "columns"    : [
    {'data': 'warehouseId'},
    {'data': 'code'},
    {'data': 'address'},
    {'data': 'no_of_stores'},
    {'data': 'capacity'}
  ]
        
        });   
}    

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

You've enabled serverSide, so it's up to your server to deal with the ordering/paging/searching. If you haven't got many rows in your table, say less than 10k, you don't really need to enable it, as the client would be able to do those operations efficiently.

sowmya1989.sit@gmail.com

Dear Colin,

You saved my life.. Thank you so much.. I was working from 4 days.. It works fine.

Thank you

sowmya1989.sit@gmail.com

I need one more help.. How to make search bar to right side. currently my buttons and search bar at left side..

colin

See dom for that.

sowmya1989.sit@gmail.com

Hi Colin,

If the table is empty it is showing loading.. and Processing.. like that. How to remove that and show no data available..Please help me..

colin

That's an entirely different to the position of the buttons and the search box. DataTables will do that when the server response isn't correct. Check the browser's console for errors, first. Then, if no joy, look at the network tab and see what the server is returning - it probably won't match what DataTables is expecting.