Datatable Search as variable not text

Datatable Search as variable not text

stephen piperstephen piper Posts: 1Questions: 1Answers: 0

i have a datatable(datatable.php) and want to search the table when it loads. This is to be achieved by populating the search field with the search text as shown below:

datatable.php

$(document).ready(function(){
   var dataTable = $('#order_data').DataTable({ 
    "search": {
    "search": 'Searh text'
    },
    dom: 'Blfrtip',
    buttons: [
    .
    .
    more code
    .
    .
    .
});

i however want to automate this depending on a value passed to the datatable page and retrieved via Get:
```
<?php
$searchValue = $_GET['fetchedValue'];

<?php > ``` Is there a way i can **search using a defined variable** ($searchValue) as compared to a static text definition in the script code as shown in datatable.php ? ?>

Thanks!

Answers

  • NarghorNarghor Posts: 5Questions: 0Answers: 0
  • GstgGstg Posts: 66Questions: 4Answers: 0

    This is exactly my problem as well. I'm passing over a variable using the URL link, and using the GET function to retrieve the variable. Now I want to use it in the search command, but it only seems to accept "static" text.

    I followed the link, but simply didn't understand it. I'm very new to using DataTables. It seemed very complex for a simple function. Any help would be greatly appreciated.

    <?php
    $search = $_GET['url_search'];

    <?php > ?>

    <

    script>
    $(document).ready( function () {
    $('#sort_table2')
    .addClass( 'nowrap' )
    .dataTable( {
    responsive: true,
    scrollY: 300,
    scrollCollapse: true,
    search: {"search": "Search Static Text"},
    } );
    } );

    I'm looking to replace "Search Static Text" with $search string, that comes form the URL pass / GET command. This would seem a common function.

    Thank you very much for any help.

  • GstgGstg Posts: 66Questions: 4Answers: 0

    I tried the following function ... but it didn't work

    $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
    $pos = strpos(data[3], $search);
    if ($pos === false) {return true;}
    else {return false;}
    });

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    Sounds like you want to send parameters to the server for the server script to filter the data for the Datatable. If you use ajax you can use the ajax.data option to send the parameters.

    This example shows how to use a variable with search.search.
    http://live.datatables.net/venuwoho/1/edit

    If this doesn't help please provide more information about what you are trying to achieve. An example test case will help us to understand.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • GstgGstg Posts: 66Questions: 4Answers: 0

    Thank you so much for your reply .... but the example you linked doesn't seem to work in the link? If I click the run JS ... the table doesn't work. If I remove the lines related to the variable search and run it like this:

    $(document).ready( function () {

    var table = $('#example').DataTable({
    search: {
    search: 'Ashton'
    }
    });
    } );

    You can see it working and how it keeps the table formatted and working. But when I try to run the example you gave, which LOOKS exactly like I would love it to work, the example doesn't seem to work. This is what you had in there as an example:

    $(document).ready( function () {
    var mySearch = 'Ashton';
    `
    var table = $('#example').DataTable({
    search: {
    search: mySearch
    }
    });
    } );

    Click on your example and you should be able to see what I mean

    But what you attempted to do is EXACTLY what I'm trying to do and coming up with the same results unfortunately

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    but the example you linked doesn't seem to work in the link? If I click the run JS ... the table doesn't work

    It had an extra character in the JS:
    http://live.datatables.net/yileyina/1/edit

    Kevin

  • GstgGstg Posts: 66Questions: 4Answers: 0

    Thank you so much .... that link is now working. I think it's really close, I guess the issue now is that I can't seem to get the variable to recognize it. It may be related to timing on when the variables are live?

    Here is what I am looking to do ...

    // Line used to pass variable data in with URL ... D:/Local/Test/Example.html?search1=karate

    <?php
    $var_search = $_GET['search1'];
    Echo "... Get: ",$var_search

    <?php > ?>

    <style>
    div.fw-container {
    z-index: 1;
    </style>
    <script> table.destroy(); </script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <script src="./site.js.download"></script>
    <script>
    $(document).ready( function () {
    var mySearch = $_GET['search1'];
    var table = $('#example')
    .addClass( 'nowrap' )
    .dataTable( {
    responsive: true,
    scrollY: 300,
    scrollCollapse: true,
    search: {"search": mySearch},
    } );
    } );

    The simple idea is I'm looking to pass a search variable from the URL and use that as the initial search for the table. But I can't seem to get any variables live into the "mySearch " section.

    Meaning if I try to use the code above OR I set the variable outside the <script> section it seems to crash the table. I hope that explanation makes sense?

  • GstgGstg Posts: 66Questions: 4Answers: 0

    Here is the full code including an example table. The only thing that is needs is a local file to create the table. I'm using PHP code to test that the variable is live and showing when it comes in from the URL, and that may be the issue, maybe the PHP variable $_GET['serach1'] isn't live during the table creation? I'm guessing that, but it seems that I can't put any $varable into the section that says:

    var mySearch = $variable

    Or it crashes the table. And that may be because I'm mixing up language terms. I'm just not sure. Again thank you so much for your assistance. It is very similar to what the first guy in this thread asked as well. It appears he was trying to do the same thing and front load the search from the URL using the ?search1=test


    <!DOCTYPE html> <!-- saved from url=(0023)https://datatables.net/ --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"> // Line used to pass variable data in with URL ... D:/Local/Test/Example.html?search1=karate <?php $var_search = $_GET['search1']; // $var_search = 'Test'; Echo "... Get: ",$var_search <?php > ?> <style> div.fw-container { z-index: 1; </style> <script> table.destroy(); </script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script> <script src="./site.js.download"></script> <script> $(document).ready( function () { var mySearch = $_GET['whosearch']; var table = $('#example') .addClass( 'nowrap' ) .dataTable( { responsive: true, scrollY: 300, scrollCollapse: true, search: {"search": mySearch}, } ); } ); </script> </head> <body class="wide hero"> <a name="top"></a> <div class="unit w-2-3"><div class="hero-callout"> <div id="example_wrapper" style="color:#000000" class="dataTables_wrapper"><div class="dataTables_length" id="example_length"></div> <div id="example_filter" class="dataTables_filter"></div> <table id="example" class="display nowrap dataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="example_info"><thead><tr role="row"> <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 100px;" aria-label="Profession: activate to sort column ascending">Profession</th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 50px;" aria-label="Subject: activate to sort column ascending">Subject</th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 30px;" aria-label="Introduction: activate to sort column ascending">Introduction</th> </tr></thead> <tbody> <tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Mark Williams</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Hwa-Rang-Do</td><td style="color:#000000">2nd Degree Black Belt</td></tr> <tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Leslie Marcus</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">TKD Expert</td><td style="color:#000000">1st Degree in TKD</td></tr> <tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Kris Smelter</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">JKD</td><td style="color:#000000">5nd Degree Black Belt</td></tr> <tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Simon Franks</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Arnis</td><td style="color:#000000">Brown Belt</td></tr> <tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Alex Sebastian</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Kendo</td><td style="color:#000000">2nd Dan</td></tr> <tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Melissa Davis</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Karate</td><td style="color:#000000">Black belt in 3 styles</td></tr> <tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Allysa Gregory</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Karate</td><td style="color:#000000">8 Years Teaching</td></tr> <tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Cynthia Rothrock</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Famous Martial Artist</td><td style="color:#000000">100+ Martial Art Movies</td></tr> <tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Charles McCarthy</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Karate</td><td style="color:#000000">Black Belt</td></tr> <tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Jody Phelps</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Karate</td><td style="color:#000000">Karate Master</td></tr> <tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Manny Freeman</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">Hwa-Rang-Do</td><td style="color:#000000">1st Dan Black Belt</td></tr> <tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">James Proper</td><td style="color:#000000">Martial Arts Instructor</td><td style="color:#000000">TKD</td><td style="color:#000000">Ranked World Competitor</td></tr> </tbody> </table> </body></html>
  • GstgGstg Posts: 66Questions: 4Answers: 0
    edited January 2021

    I tried to share the full code here, but I did something wrong. haha. So I dropped it on a link in dropbox.

    https://dropbox.com/s/okvc2t8dqpotwxq/Example.html?dl=0

    You only need the Example.html and a local copy of

    "./site.js.download"

    To make it work. You can use a local machine (although the PHP won't work) to pass the variable in through the URL. As an example ...

    // Line used to pass variable data in with URL ...

    D:/Local/Test/Example.html?search1=karate

    I'm looking to have the variable used to set the initial search. But when I try things like:

    var mySearch = $_GET['search1']

    The table crashes (doesn't work). But is I change the code to

    var mySearch = 'karate'

    It sets up the initial search fine. So I think there is a conflict between how I'm using the variables and maybe the languages, meaning maybe the PHP variables are not live for use in the JS code for the table? That's just a guess.

    Thank you again for your time. This has been a major stumbling block for us on this project.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    var mySearch = $_GET['whosearch'];

    That isn't valid Javascript. You should be getting an error on the console saying that there is a syntax error.

    You can assign a PHP variable to Javascript using something like:

    var mySearch = <?php echo json_encode($_GET['whosearch']); ?>;
    

    That will execute the PHP at the server-side resulting in Javascript that looks like:

    var mySearch = 'whatever-the-search-term-was';
    

    Allan

  • GstgGstg Posts: 66Questions: 4Answers: 0

    Thank you SOO Much. That worked with a small adjsutment.

            var mySearch = "<?php echo $_GET['search1'] ?>";
    

    Thank you again. Very Appreciative

This discussion has been closed.