search not working

suser · September 2016

I try this example
https://datatables.net/examples/basic_init/scroll_xy.html

and i do this

<script type="text/javascript">
    $(document).ready(function() {
        $('#tabledata').dataTable({
         bSort: false,
         "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true,
        "scrollX": true,
        dom: 'Blfrtip',
        lengthMenu: [
            [10, 25, 50, -1],
            ['25 rows', '50 rows', 'Show all']
        ],
        buttons: [
            'excelHtml5'
        ]

    } );
} );
</script>

i generate table through jquery

$("#tabledata").append(
"<thead><tr><th>No</th><th>DateTime</th><th>Status</th><th>Spd</th><th>Lon</th><th>Lati</th><th>Ref</th><th>Dir</th><th>No2</th><th>No3</th><th>VehDate</th><th>CoName</th><th>ID</th><th>marks</th></tr></thead>");
for (var i = 0; i < d.length - 1; i++) {
if (d[i] !== null) {
$("#tabledata").append("<tbody><tr><td>" +
d[i][0] + "</td> <td>" +
d[i][1] + "</td> <td>" +
d[i][2] + "</td> <td>" +
d[i][3] + "</td> <td>" +
d[i][4] + "</td><td>" +
d[i][5] + "</td><td>" +
d[i][6] + "</td><td>" +
d[i][7] + "</td><td>" +
d[i][8] + "</td><td>" +
d[i][9] + "</td><td>" +
d[i][10] + "</td><td>" +
d[i][11] + "</td><td>" +
d[i][12] + "</td><td>" +
d[i][13] + "</td><td>" +
d[i][14] + "</td></tr></tbody>");

table generate successfully but searching ,headers, and lines inside the table not working

and also there is sort arrows at the corner left hand side when i click on these sort arrows then headers disappear

i also add these links

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<script src="Scripts/map/jquery.fullbg.js"></script><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzSyC-o_Xf8Ki5rOpEyLgR5msc&sensor=false"></script>
<link href="Styles/stylechart.css" rel="stylesheet" />
<link href="Styles/fixed-navigation-bar.css" rel="stylesheet" />
<link href="Styles/map.css" rel="stylesheet" />

<%-- for gridview template--%>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<%--<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />--%><link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="Styles/grid/datatables_bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>    
<script type="text/javascript"  src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript"   src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"   src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript"  src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript"  src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript"  src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script><link rel="stylesheet"  href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
 <link href="Styles/grid/buttons.dataTables.min.css" rel="stylesheet" />

<%-- for gridview template--%>
</head>

check this image

allan · September 2016

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

suser · September 2016

i done with this simple html table and enter table manually and this work perfect

<table id="tabledata" class="display nowrap cell-border">
        <thead>
            <tr>
                <th>
                    1
                </th>
                <th>
                    2
                </th>
                <th>
                    3
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    ABC
                </td>
                <td>DEF</td>
                <td>ASD</td>
            </tr>
            <tr>
                <td>
                    ABC
                </td>
                <td>DEasdF</td>
                <td>ASasdD</td>
            </tr>
            <tr>
                <td>
                    ABasdC
                </td>
                <td>DEasdF</td>
                <td>ASasdD</td>
            </tr>
            <tr>
                <td>
                    asdABC
                </td>
                <td>DEasdF</td>
                <td>ASasdD</td>
            </tr>
        </tbody>
    </table>

but the problem is now i can not create table manually i generate table through jquery like i posted on question so when i do this search not working

so when when i do this step by step like this
Step 1

 <script type="text/javascript">
     $(document).ready(function () {
         $("#tabledata").dataTable();
     });
    </script>

STEP 2

<script type="text/javascript">
     $(document).ready(function () {
         $("#tabledata").dataTable({
             "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
         });
     });
    </script>

Step 3

<script type="text/javascript">
     $(document).ready(function () {
         $("#tabledata").dataTable({
             "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
"bSort": true,
         });
     });
    </script>

Step 4

<script type="text/javascript">
     $(document).ready(function () {
         $("#tabledata").dataTable({
             "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
"bSort": true,
 dom: 'Blfrtip',
             lengthMenu: [
                 [10, 25, 50, -1],
                 ['10 rows', '25 rows', '50 rows', 'Show all']
             ],
             buttons: [
                 'excelHtml5'
             ]
         });
     });
    </script>

Step 5

now when i add
"scrollY": 100,
"scrollX": true,

i add this because one column has long text

<script type="text/javascript">
     $(document).ready(function () {
         $("#tabledata").dataTable({
             "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
             "bSort": true,
             "scrollY": 100,
             "scrollX": true,
             dom: 'Blfrtip',
             lengthMenu: [
                 [10, 25, 50, -1],
                 ['10 rows', '25 rows', '50 rows', 'Show all']
             ],
             buttons: [
                 'excelHtml5'
             ]
         });
     });
    </script>

then sort arrows display at the left corner and when i click on these arrows then headers disappear..
@allan

allan · September 2016

If you could give me a link to a test case showing the issue I would be happy to take a look.

Allan

suser · September 2016

@allan check this js fiddle please

i create test case

https://jsfiddle.net/wtnwgz09/1/

allan · September 2016

See the append FAQ:

Q. I append a row to the table using DOM/jQuery, but it is removed on redraw..

Allan

suser · September 2016

how i do this @allan .

allan · September 2016

Per the FAQ you would use the DataTables API to add the rows to the table. Specifically row.add().

Allan

suser · September 2016

is there any example?

F12Magic · September 2016

You could click on row.add() which @allan provided.
Or see the examples api add.row page.

suser · October 2016

@F12Magic i dont want to add new row .. as i already populated rows from database

F12Magic · October 2016

The code in your first post has 14 table headers defined. Your table body has 15 columns (d[i][0] to d[i][14]). That's causing the strange layout and also breaks datatables.

suser · October 2016

@F12Magic if you check this js fiddle https://jsfiddle.net/wtnwgz09/1/ which i created then how i do this in this fiddle ? also i sort out this problem which you identify but still shows same problem

F12Magic · October 2016

Your fiddle does not work because you need to link the javascript and css files on the left side via the "External resources" button. For each file you wish to include, click on the + and add the path to the file.
Do not try to add them in the HTML and CSS panel. Please adjust your fiddle.

suser · October 2016

ok now check @F12Magic https://jsfiddle.net/wtnwgz09/3/

i sort this problem .. when i search any word then data is disappear and also when i click on sort arrows then also data is disappear

and important point is when i export data to excel and then when i check excel file then no data is appear in excel

F12Magic · October 2016

1.Again, you created 4 columns in the header and only 3 in the body.
2.You didn't create a table body element.
3.Appending the html needs to be inside the document ready jquery event and before the datatables initialization.
4.Updated fiddle: https://jsfiddle.net/wtnwgz09/6/

suser · October 2016

ok thanku for this

search not working

search not working

Answers

Howdy, Stranger!

Categories

DataTables

search not working

search not working

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables