export and searching

suser

i am using these two links
for seaching,sorting ,paging

https://datatables.net/examples/basic_init/scroll_xy.html

and for exporting

https://datatables.net/extensions/buttons/examples/html5/simple.html

LINKS

 <%--  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/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="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.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 rel="stylesheet" href = "https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" />

    
    <%--  for gridview template--%>
CODE

code

<script type="text/javascript">
        $(document).ready(function () {
            $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
                "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
                "scrollY":200,
                "scrollX": true,
               dom: 'Bfrtip',
                buttons: [
                    'excelHtml5'
                ]
            });
        });
   
</script>

when i use dom:'Bfrtip' then show entries dropdown is not display and when i remove this then show dropdown entreis is display

when i use dom:'Bfrtip'

when i remove dom:'Bfrtip'

so how i use these both of them ?

allan

FAQs: Q. How can I show the page length select when using Buttons?.

Allan

suser

means beacuse of this $(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
],
buttons: [
'pageLength'
]
} );
} );

show entries option is visible?

allan

Add the l option into your dom parameter like the FAQ says.

suser

like this ??

 <script type="text/javascript">
        $(document).ready(function () {
            $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
                "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
                "scrollY":200,
                "scrollX": true,
                dom: 'Bfrtip',
                lengthMenu:[
                    [10,25,50,-1],
                    ['10 rows','25 rows','50 rows','Show all']
                ],
                buttons: [
                    'excelHtml5',
                    
                ]
            });
        });
   
</script>

now i do this but this only visible excel button show entries option is not display

@allan

F12Magic

Like @Allan wrote, add a l to the dom option. Change dom: 'Bfrtip' to dom: 'Blfrtip'
Your code changed:

<script type="text/javascript">
        $(document).ready(function () {
            $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
                "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
                "scrollY":200,
                "scrollX": true,
                dom: 'Blfrtip',
                lengthMenu:[
                    [10,25,50,-1],
                    ['10 rows','25 rows','50 rows','Show all']
                ],
                buttons: [
                    'excelHtml5'
                ]
            });
        });
</script>

suser

o k thanku