jjf3 Posted November 2, 2013 Share Posted November 2, 2013 (edited) How would I go about adding a search feature, css, and a hidden rows feature/next buttons to this table I have written in PHP? There are about 5000+ items listed in this table, so it's crucial that it's a fast search bar. Any help would be greatly appreciated. I was trying to use jquery but everything is messed up and the search + features don't show up. $fp=fopen("csv/inventory4.html",'w'); $write=fputs($fp,$html_body,strlen($html_body)); $i=0; $content = file("webinvt.txt"); foreach($content as $line) { $l=csv_split($line); if(!strstr($l[11],"SET")) { if($i==10) { $tmp = '<tr>'; $write=fputs($fp,$tmp,strlen($tmp)); $i=0; } $onhand = (int)$l[15]; $committed = (int)$l[16]; $avail = $onhand - $committed; $wcdate = substr($l[23],4); $eastdate = substr($l[19],4); if(strstr($l[1],"DISC")) { $html_body ='<tr "> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr>'; } else { $html_body ='<tr> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr> Edited November 2, 2013 by jjf3 Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/ Share on other sites More sharing options...
denno020 Posted November 3, 2013 Share Posted November 3, 2013 The easiest way I can think of would be to use DataTables, which is a jQuery plugin. Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1456653 Share on other sites More sharing options...
jjf3 Posted November 4, 2013 Author Share Posted November 4, 2013 The easiest way I can think of would be to use DataTables, which is a jQuery plugin. For some reason datatables doesn't seem to like html tables...Also all of my HTML is included inside a PHP variable called $html_body. This is causing me headaches. It goes into a table alright, but the whole thing is shown and none of the features from datatables works. Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1456928 Share on other sites More sharing options...
denno020 Posted November 5, 2013 Share Posted November 5, 2013 Just so long as your table that is getting printed out is formatted correctly, then the datatables should still work. Are you able to show me the HTML that is produced when you open this page? If you could copy and paste the whole HTML for the page, we'll work out what's going on. Denno Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1456959 Share on other sites More sharing options...
jjf3 Posted November 5, 2013 Author Share Posted November 5, 2013 Just so long as your table that is getting printed out is formatted correctly, then the datatables should still work. Are you able to show me the HTML that is produced when you open this page? If you could copy and paste the whole HTML for the page, we'll work out what's going on. Denno http://forums.phpfreaks.com/topic/283504-input-csv-file-into-datatable/?do=findComment&comment=1456486 thank you sooo much. Its actually posted on another topic here. The link is above! Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1456971 Share on other sites More sharing options...
denno020 Posted November 5, 2013 Share Posted November 5, 2013 Can you actually copy and paste the HTML over from a rendered page? Saves me having to set up the script and get it rendering myself. Just open the page, view the source, then copy and paste it all here. Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457108 Share on other sites More sharing options...
jjf3 Posted November 5, 2013 Author Share Posted November 5, 2013 Can you actually copy and paste the HTML over from a rendered page? Saves me having to set up the script and get it rendering myself. Just open the page, view the source, then copy and paste it all here. <?php set_time_limit(0); function csv_split($line,$delim=',',$removeQuotes=true) { #$line: the csv line to be split #$delim: the delimiter to split by #$removeQuotes: if this is false, the quotation marks won't be removed from the fields $fields = array(); $fldCount = 0; $inQuotes = false; for ($i = 0; $i < strlen($line); $i++) { if (!isset($fields[$fldCount])) $fields[$fldCount] = ""; $tmp = substr($line,$i,strlen($delim)); if ($tmp === $delim && !$inQuotes) { $fldCount++; $i += strlen($delim)-1; } else if ($fields[$fldCount] == "" && $line[$i] == '"' && !$inQuotes) { if (!$removeQuotes) $fields[$fldCount] .= $line[$i]; $inQuotes = true; } else if ($line[$i] == '"') { if ($line[$i+1] == '"') { $i++; $fields[$fldCount] .= $line[$i]; } else { if (!$removeQuotes) $fields[$fldCount] .= $line[$i]; $inQuotes = false; } } else { $fields[$fldCount] .= $line[$i]; } } return $fields; } $html_body = '<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="/css/demo_page.css"> <link rel="stylesheet" type="text/css" href="/css/demo_table.css"> <title>CSV Contents</title> <style type="text/css"> <!-- .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .style9 {font-size: 12px} .logo h1 {position: absolute; top: 5px; right: 5px; font-size:14px; } .logo img-with-text {float: left; left 5px; font-size:14px; .img-with-text {text-align: justify; width: 40%; height: 20%;} .img-with-text img {display: block; margin: 0 auto;} .search {margin : 0px;} --> </style> <script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script> <script type="text/javascript" language="javascript" src="/js/jquery.js"></script> <div class="img-with-text"> <img src="/image002.png" alt="sometext" /> <p>WC" is West Coast warehouse- please add approximately 2-3 weeks for the arrival to East Coast.<br><br> </p> </div> <div class="logo"> <br>Last Updated on '.date("F j, Y, g:i a",time()+3600).' </h1> </div> </head> <body id="dt_example"> <div id="container"> <h1> Check Inventory Here</h1> <table> <thead> <tr> <th>Item No</th> <th>Description</th> <th>Price</th> <th>Available</th> <th>Back Ordered</th> <th>On Order</th> <th>ETA WH</th> <th>WC On Hand</th> <th>WC On Ord</th> <th>WC Order Date</th> </tr> </thead> <tbody> '; $fp=fopen("csv/inventory4.html",'w'); $write=fputs($fp,$html_body,strlen($html_body)); $i=0; $content = file("webinvt.txt"); foreach($content as $line) { $l=csv_split($line); if(!strstr($l[11],"SET")) { if($i==10) { $tmp = '<tr>'; $write=fputs($fp,$tmp,strlen($tmp)); $i=0; } $onhand = (int)$l[15]; $committed = (int)$l[16]; $avail = $onhand - $committed; $wcdate = substr($l[23],4); $eastdate = substr($l[19],4); if(strstr($l[1],"DISC")) { $html_body ='<tr "> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr>'; } else { $html_body ='<tr> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr> '; } $write=fputs($fp,$html_body,strlen($html_body)); $i++; } } $html_body=' </tbody> <tfoot> <tr> <th>Item No</th> <th>Description</th> <th>Price</th> <th>Available</th> <th>Back Ordered</th> <th>On Order</th> <th>ETA WH</th> <th>WC On Hand</th> <th>WC On Ord</th> <th>WC Order Date</th> </tr> </tfoot> </table> </body> </html>'; $write=fputs($fp,$html_body,strlen($html_body)); fclose($fp); ?> Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457110 Share on other sites More sharing options...
denno020 Posted November 5, 2013 Share Posted November 5, 2013 Mate that's the PHP file. If you copy the source of the webpage, there will be no PHP in it. I just want to look at the finished product, not the script that makes it. I'll look at that later. Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457111 Share on other sites More sharing options...
jjf3 Posted November 5, 2013 Author Share Posted November 5, 2013 Mate that's the PHP file. If you copy the source of the webpage, there will be no PHP in it. I just want to look at the finished product, not the script that makes it. I'll look at that later. I am soooo sorry I must of read your post wrong or something. I cannot give you the entire contents because there is confidential information in it, but I'll give you the jist of it. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSV Contents</title> <link rel="stylesheet" type="text/css" href="/css/demo_page.css" /> <link rel="stylesheet" type="text/css" href="/css/demo_table.css" /> <style type="text/css"> <!-- .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .style9 {font-size: 12px} .logo h1 {position: absolute; top: 5px; right: 5px; font-size:14px; } .logo img-with-text {float: left; left 5px; font-size:14px; .img-with-text {text-align: justify; width: 40%; height: 20%;} .img-with-text img {display: block; margin: 0 auto;} .search {margin : 0px;} --> </style> <script src="/js/jquery.js"></script> <script src="/js/jquery.dataTables.nightly.js"></script> <div class="img-with-text"> <img src="/csv/image002.png" alt="sometext" /> <p>WC" is West Coast warehouse- please add approximately 2-3 weeks for the arrival to East Coast.<br><br> </p> </div> <div class="logo"> <br>Last Updated on November 5, 2013, 6:15 pm </h1> </div> </head> <body id="dt_example"> <div id="container"> <h1>Check Inventory Here</h1> <table> <thead> <tr> <th>Item No</th> <th>Description</th> <th>Price</th> <th>Available</th> <th>Back Ordered</th> <th>On Order</th> <th>ETA WH</th> <th>WC On Hand</th> <th>WC On Ord</th> <th>WC Order Date</th> </tr> </thead> <tbody> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> . . . . . . . . . . . . . * 50000 more rows of stuff! </tr> </tbody> <tfoot> <tr> <th>Item No</th> <th>Description</th> <th>Price</th> <th>Available</th> <th>Back Ordered</th> <th>On Order</th> <th>ETA WH</th> <th>WC On Hand</th> <th>WC On Ord</th> <th>WC Order Date</th> </tr> </tfoot> </table> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457116 Share on other sites More sharing options...
objnoob Posted November 5, 2013 Share Posted November 5, 2013 tfoot needs to come before tbody Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457118 Share on other sites More sharing options...
denno020 Posted November 6, 2013 Share Posted November 6, 2013 Few things with your code. You have output in the <head> tags. This isn't a header tag, this is for document information, so you should remove the code from the head tags, and place it in either a div with id/class of header, or inside <header> tags that are inside the body tags. You also have an ending </h1> tag, but no opening <h1> tag. There are multiple divs that either aren't opened, or aren't closed. So you're going to need to clean up your code/output a fair bit, and once you've done that, you'll get something like this: http://jsfiddle.net/Gd9QW/ That works with the datatables. It looks terrible, there is no CSS, but it works. Change some of the content in the table cells, and you'll see the sorting work when you click on the column headers. Denno Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457121 Share on other sites More sharing options...
jjf3 Posted November 6, 2013 Author Share Posted November 6, 2013 (edited) Few things with your code. You have output in the <head> tags. This isn't a header tag, this is for document information, so you should remove the code from the head tags, and place it in either a div with id/class of header, or inside <header> tags that are inside the body tags. You also have an ending </h1> tag, but no opening <h1> tag. There are multiple divs that either aren't opened, or aren't closed. So you're going to need to clean up your code/output a fair bit, and once you've done that, you'll get something like this: http://jsfiddle.net/Gd9QW/ That works with the datatables. It looks terrible, there is no CSS, but it works. Change some of the content in the table cells, and you'll see the sorting work when you click on the column headers. Denno $(document).ready(function () { $('#example').dataTable(); }); Thank you sooo much, it really is a life saver. I will try this out at work tomorrow. Funny as I was copying the text over to here, I caught a missing Div or two myself. Now I have a new way of error checking. The only question that I have remaining is, do you think the Divs are the reason for the document.ready function working not quite right? I use Sublime Text 2 for my editor and it always shows an error when I place in this piece of code: This goes on the php page. I have tried to end the $html_body variable by using ': but it doesn't even update then... Edited November 6, 2013 by jjf3 Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457122 Share on other sites More sharing options...
jjf3 Posted November 6, 2013 Author Share Posted November 6, 2013 tfoot needs to come before tbody Thank you for your input, didn't catch that. Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457123 Share on other sites More sharing options...
denno020 Posted November 6, 2013 Share Posted November 6, 2013 You can put $(document).ready(function () { $('#example').dataTable(); }); anywhere you want. You can put it in script tags in your document header (in between the <head> tags), you can put it in your body in between <script> tags, but ideally you'd have it in an external JS file. If you don't already have an external JS file, I would suggest adding it to the end of your <body> E.g. <!-- Rest of your page --> <script> $(document).ready(function () { $('#example').dataTable(); }); </script> </body> </html> Obviously make sure you give the table a valid id, and use that in place of 'example', and also make sure the datatables script is being imported correctly. Denno Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457124 Share on other sites More sharing options...
jjf3 Posted November 6, 2013 Author Share Posted November 6, 2013 You can put $(document).ready(function () { $('#example').dataTable(); }); anywhere you want. You can put it in script tags in your document header (in between the <head> tags), you can put it in your body in between <script> tags, but ideally you'd have it in an external JS file. If you don't already have an external JS file, I would suggest adding it to the end of your <body> E.g. <!-- Rest of your page --> <script> $(document).ready(function () { $('#example').dataTable(); }); </script> </body> </html> Obviously make sure you give the table a valid id, and use that in place of 'example', and also make sure the datatables script is being imported correctly. Denno OK Thank you! I will try adding it in the morning and let you know how it goes. After I clean up the HTML a bit I plan on, using the document ready function in a separate .js file. So then, all I would have to add is, right?: <script src="/js/makedatatablesworkfunction.js"></script> Also for the table. Would the code look something like this? <table id="inventory"> <thead> <tr> <th>Item No</th> ETC ETC Rest of HTML. Then in the makedatatablesworkfunction.js file change it from example to inventory like so: $(document).ready(function () { $('#inventory').dataTable(); }); Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457130 Share on other sites More sharing options...
denno020 Posted November 6, 2013 Share Posted November 6, 2013 Yep you're spot on there. Good Luck Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457131 Share on other sites More sharing options...
jjf3 Posted November 6, 2013 Author Share Posted November 6, 2013 (edited) Yep you're spot on there. Good Luck Ok, i got that to work, partially. I got to put 8 rows of data in a table, but none of the rest appeared and the drop down and next buttons did not work. It only registered 8 entries. Datatables uses css classes for each row. I have options of: class="odd gradeA" class="even gradeA" class="even gradeC" class="gradeA" For Datatables how should I go about alternating between these in PHP? Take a look at the source code for the datatables example on their website for an example of what I am talking about. Also I had the datatable working but after I changed something I cannot get it back again. The features have since disappeared. HTML Output currently: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSV Contents</title> <link rel="stylesheet" type="text/css" href="/css/demo_page.css" /> <link rel="stylesheet" type="text/css" href="/css/demo_table.css" /> <style type="text/css"> <!-- .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .style9 {font-size: 12px} .logo h1 {position: absolute; top: 5px; right: 5px; font-size:14px; } .logo img-with-text {float: left; left 5px; font-size:14px; .img-with-text {text-align: justify; width: 40%; height: 20%;} .img-with-text img {display: block; margin: 0 auto;} .search {margin : 0px;} --> </style> <script src="/js/jquery.js"></script> <script src="/js/jquery.dataTables.nightly.js"></script> <script src="/js/makedatatablesworkfunction.js"></script> <div class="img-with-text"> <img src="/csv/image002.png" alt="sometext" /> <p>"WC" is West Coast warehouse- please add approximately 2-3 weeks for the arrival to East Coast.<br><br> </p> </div> <div class="logo"> <br>Last Updated on November 5, 2013, 6:15 pm </h1> </div> </head> <body id="dt_example"> <div id="container"> <h1>Check Inventory Here</h1> <table cellpadding="0" cellspacing="0" border="0" class="display" id="inventory" width="100%"> <thead> <tr> <th>Item No</th> <th>Description</th> <th>Price</th> <th>Available</th> <th>Back Ordered</th> <th>On Order</th> <th>ETA WH</th> <th>WC On Hand</th> <th>WC On Ord</th> <th>WC Order Date</th> </tr> </thead> <tfoot> <tr> <th>Item No</th> <th>Description</th> <th>Price</th> <th>Available</th> <th>Back Ordered</th> <th>On Order</th> <th>ETA WH</th> <th>WC On Hand</th> <th>WC On Ord</th> <th>WC Order Date</th> </tr> </tfoot> </thead> <tbody> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> . . . . . . . . . . . . . * 50000 more rows of stuff! </tr> </tbody> </table> </div> </body> </html> And Here is the PHP: I use '; to escape after the first <tbody> so that I can include the following PHP code: '; $fp=fopen("csv/inventory4.html",'w'); $write=fputs($fp,$html_body,strlen($html_body)); $i=0; $content = file("webinvt.txt"); foreach($content as $line) { $l=csv_split($line); if(!strstr($l[11],"SET")) { if($i==10) { $tmp = '<tr >'; $write=fputs($fp,$tmp,strlen($tmp)); $i=0; } $onhand = (int)$l[15]; $committed = (int)$l[16]; $avail = $onhand - $committed; $wcdate = substr($l[23],4); $eastdate = substr($l[19],4); if(strstr($l[1],"DISC")) { $html_body ='<tr> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr>'; } else { $html_body ='<tr> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr> '; } $write=fputs($fp,$html_body,strlen($html_body)); $i++; } } $html_body=' </tbody> </table> </div> </body> </html>'; $write=fputs($fp,$html_body,strlen($html_body)); fclose($fp); ?> Where did I mess up here? It also loads slow because we have so much items, but I'm guessing this is a formatting issue and datatables should be able to handle 5000 items. Edited November 6, 2013 by jjf3 Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457222 Share on other sites More sharing options...
denno020 Posted November 6, 2013 Share Posted November 6, 2013 Ok so I just looked at your first bit of code, as I didn't know what you meant by using the semi-colon for escaping. What you're actually doing is using the semi-colon to end the line for the string input of the html_body variable. To be honest, it's quite hard to follow your code. And also, I hope that that isn't the current HTML output, because you still have divs in the <head> tags. Can you attach your webinvt.txt file so I can actually run the script and see the output myself. Have you considered using a database? It would make this much easier, and I would think much quicker too, as you don't have to handle external files. Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457284 Share on other sites More sharing options...
jjf3 Posted November 6, 2013 Author Share Posted November 6, 2013 Ok so I just looked at your first bit of code, as I didn't know what you meant by using the semi-colon for escaping. What you're actually doing is using the semi-colon to end the line for the string input of the html_body variable. To be honest, it's quite hard to follow your code. And also, I hope that that isn't the current HTML output, because you still have divs in the <head> tags. Can you attach your webinvt.txt file so I can actually run the script and see the output myself. Have you considered using a database? It would make this much easier, and I would think much quicker too, as you don't have to handle external files. Quite right, I forgot to add the </head> into the code on here. On the site it's there. Right before: <body id="dt_example">. Are you saying I should move the </head> to before the logo? I cannot attach the webinvt.txt. That is confidential information. However, you can make a txt file with "stuff," X20 on one row and multiply that by 5000 rows to get a general idea of what is going on in there. How would I be able to convert this to a database without messing up current operations and php scripts? Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457286 Share on other sites More sharing options...
denno020 Posted November 7, 2013 Share Posted November 7, 2013 So you have 20 elements on a line? I assume comma separated? As for your <head> tag, the following if part of the HTML that you just pasted before <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSV Contents</title> <link rel="stylesheet" type="text/css" href="/css/demo_page.css" /> <link rel="stylesheet" type="text/css" href="/css/demo_table.css" /> <style type="text/css"> <!-- .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .style9 {font-size: 12px} .logo h1 {position: absolute; top: 5px; right: 5px; font-size:14px; } .logo img-with-text {float: left; left 5px; font-size:14px; .img-with-text {text-align: justify; width: 40%; height: 20%;} .img-with-text img {display: block; margin: 0 auto;} .search {margin : 0px;} --> </style> <script src="/js/jquery.js"></script> <script src="/js/jquery.dataTables.nightly.js"></script> <script src="/js/makedatatablesworkfunction.js"></script> <div class="img-with-text"> <img src="/csv/image002.png" alt="sometext" /> <p>"WC" is West Coast warehouse- please add approximately 2-3 weeks for the arrival to East Coast.<br><br> </p> </div> <div class="logo"> <br>Last Updated on November 5, 2013, 6:15 pm </h1> </div> </head> <!-- ========================== Notice the ending head tag here ======================== --> <body id="dt_example"> <div id="container"> This is where it needs to be: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSV Contents</title> <link rel="stylesheet" type="text/css" href="/css/demo_page.css" /> <link rel="stylesheet" type="text/css" href="/css/demo_table.css" /> <style type="text/css"> <!-- .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .style9 {font-size: 12px} .logo h1 {position: absolute; top: 5px; right: 5px; font-size:14px; } .logo img-with-text {float: left; left 5px; font-size:14px; .img-with-text {text-align: justify; width: 40%; height: 20%;} .img-with-text img {display: block; margin: 0 auto;} .search {margin : 0px;} --> </style> <script src="/js/jquery.js"></script> <script src="/js/jquery.dataTables.nightly.js"></script> <script src="/js/makedatatablesworkfunction.js"></script> </head><!-- =========New </head> tag position=============== --> <div class="img-with-text"> <img src="/csv/image002.png" alt="sometext" /> <p>"WC" is West Coast warehouse- please add approximately 2-3 weeks for the arrival to East Coast.<br><br> </p> </div> <div class="logo"> <br>Last Updated on November 5, 2013, 6:15 pm </h1> </div> <!-- =========Old </head> tag position=============== --> <body id="dt_example"> <div id="container"> Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457296 Share on other sites More sharing options...
jjf3 Posted November 7, 2013 Author Share Posted November 7, 2013 (edited) So you have 20 elements on a line? I assume comma separated? As for your <head> tag, the following if part of the HTML that you just pasted before <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSV Contents</title> <link rel="stylesheet" type="text/css" href="/css/demo_page.css" /> <link rel="stylesheet" type="text/css" href="/css/demo_table.css" /> <style type="text/css"> <!-- .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .style9 {font-size: 12px} .logo h1 {position: absolute; top: 5px; right: 5px; font-size:14px; } .logo img-with-text {float: left; left 5px; font-size:14px; .img-with-text {text-align: justify; width: 40%; height: 20%;} .img-with-text img {display: block; margin: 0 auto;} .search {margin : 0px;} --> </style> <script src="/js/jquery.js"></script> <script src="/js/jquery.dataTables.nightly.js"></script> <script src="/js/makedatatablesworkfunction.js"></script> <div class="img-with-text"> <img src="/csv/image002.png" alt="sometext" /> <p>"WC" is West Coast warehouse- please add approximately 2-3 weeks for the arrival to East Coast.<br><br> </p> </div> <div class="logo"> <br>Last Updated on November 5, 2013, 6:15 pm </h1> </div> </head> <!-- ========================== Notice the ending head tag here ======================== --> <body id="dt_example"> <div id="container"> This is where it needs to be: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSV Contents</title> <link rel="stylesheet" type="text/css" href="/css/demo_page.css" /> <link rel="stylesheet" type="text/css" href="/css/demo_table.css" /> <style type="text/css"> <!-- .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .style9 {font-size: 12px} .logo h1 {position: absolute; top: 5px; right: 5px; font-size:14px; } .logo img-with-text {float: left; left 5px; font-size:14px; .img-with-text {text-align: justify; width: 40%; height: 20%;} .img-with-text img {display: block; margin: 0 auto;} .search {margin : 0px;} --> </style> <script src="/js/jquery.js"></script> <script src="/js/jquery.dataTables.nightly.js"></script> <script src="/js/makedatatablesworkfunction.js"></script> </head><!-- =========New </head> tag position=============== --> <div class="img-with-text"> <img src="/csv/image002.png" alt="sometext" /> <p>"WC" is West Coast warehouse- please add approximately 2-3 weeks for the arrival to East Coast.<br><br> </p> </div> <div class="logo"> <br>Last Updated on November 5, 2013, 6:15 pm </h1> </div> <!-- =========Old </head> tag position=============== --> <body id="dt_example"> <div id="container"> thanks I'll work on it tomorrow and yes I have 20 elements on a line. They are seperated by , and "". So it would look like, "stuff", "stuff" etc... Edited November 7, 2013 by jjf3 Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457297 Share on other sites More sharing options...
jjf3 Posted November 7, 2013 Author Share Posted November 7, 2013 (edited) Ok so I just looked at your first bit of code, as I didn't know what you meant by using the semi-colon for escaping. What you're actually doing is using the semi-colon to end the line for the string input of the html_body variable. To be honest, it's quite hard to follow your code. And also, I hope that that isn't the current HTML output, because you still have divs in the <head> tags. Can you attach your webinvt.txt file so I can actually run the script and see the output myself. Have you considered using a database? It would make this much easier, and I would think much quicker too, as you don't have to handle external files. So it works perfect locally with only the HTML, something within my PHP is messing it up! I don't think the document ready function works on the PHP file, but the PHP file re-writes the HTML every two hours. I'm thinking if there is a way to place the function on the HTML page without it being rewritten, then that would solve everything. Though I'm not certain. I'm not sure what I did to get the 8 rows to appear in the data table at first, but on the site, I haven't been able to re-create the features again. All the HTML is in the right spot. Although I do have a question about this last bit: Does this look right to you? $write=fputs($fp,$html_body,strlen($html_body)); $i++; } } $html_body=' </tbody> </table> </div> </body> </html>'; $write=fputs($fp,$html_body,strlen($html_body)); fclose($fp); ?> Edited November 7, 2013 by jjf3 Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457396 Share on other sites More sharing options...
jjf3 Posted November 7, 2013 Author Share Posted November 7, 2013 (edited) Ok so I just looked at your first bit of code, as I didn't know what you meant by using the semi-colon for escaping. What you're actually doing is using the semi-colon to end the line for the string input of the html_body variable. To be honest, it's quite hard to follow your code. And also, I hope that that isn't the current HTML output, because you still have divs in the <head> tags. Can you attach your webinvt.txt file so I can actually run the script and see the output myself. Have you considered using a database? It would make this much easier, and I would think much quicker too, as you don't have to handle external files. OK I figured it out! It's a mixture of the PHP and the HTML The HTML produces an extra <tr> after every ten rows. This obviously displaces the other rows inside the datatable. How would I go about eliminating this output? See this code: if($i==10) { $tmp = '<tr>'; $write=fputs($fp,$tmp,strlen($tmp)); $i=0; } inside the rest of the PHP code: $fp=fopen("csv/inventory4.html",'w'); $write=fputs($fp,$html_body,strlen($html_body)); $i=0; $content = file("webinvt.txt"); foreach($content as $line) { $l=csv_split($line); if(!strstr($l[11],"SET")) { if($i==10) { $tmp = '<tr>'; $write=fputs($fp,$tmp,strlen($tmp)); $i=0; } $onhand = (int)$l[15]; $committed = (int)$l[16]; $avail = $onhand - $committed; $wcdate = substr($l[23],4); $eastdate = substr($l[19],4); if(strstr($l[1],"DISC")) { $html_body ='<tr> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr>'; } else { $html_body ='<tr> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr> '; } $write=fputs($fp,$html_body,strlen($html_body)); $i++; } } $html_body=' </tbody> </table> </div> </body> </html>'; $write=fputs($fp,$html_body,strlen($html_body)); fclose($fp); ?> Look for the second <tr> at the end of this HTML code: <tr> <td>other</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>other</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>other</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>other</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>other</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr><tr><tr> <td>more stuff</td> * * * ETC ETC Edited November 7, 2013 by jjf3 Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457401 Share on other sites More sharing options...
denno020 Posted November 8, 2013 Share Posted November 8, 2013 Ok, so what is the significance of the 10? Why are you counting to 10? I really need to know the structure of your webinvt.txt file if I'm going to be able to run any tests myself.. Just putting 'stuff' in there won't work, as you're echoing out array indexes of strings, which means it's only going to grab a single letter, which would actually be a number from the real data I would assume. To be honest, this is really a terrible way to manage your inventory, it's exceptionally clunky and nearly impossible to maintain. I suggest you put your efforts into a writing a script that will parse your webinvt.txt file, and instead of writing it to a html file, save it to a database. You can then use phpmyadmin to manage the values in the database, or you could write your own, very basic, CMS (content management system). But as I said, without knowing what each field in your txt file is supposed to be (they're not going to all be strings), it's incredibly hard for me to give you definitive help, without just throwing guesses at you.. Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457505 Share on other sites More sharing options...
jjf3 Posted November 8, 2013 Author Share Posted November 8, 2013 (edited) Ok, so what is the significance of the 10? Why are you counting to 10? I really need to know the structure of your webinvt.txt file if I'm going to be able to run any tests myself.. Just putting 'stuff' in there won't work, as you're echoing out array indexes of strings, which means it's only going to grab a single letter, which would actually be a number from the real data I would assume. To be honest, this is really a terrible way to manage your inventory, it's exceptionally clunky and nearly impossible to maintain. I suggest you put your efforts into a writing a script that will parse your webinvt.txt file, and instead of writing it to a html file, save it to a database. You can then use phpmyadmin to manage the values in the database, or you could write your own, very basic, CMS (content management system). But as I said, without knowing what each field in your txt file is supposed to be (they're not going to all be strings), it's incredibly hard for me to give you definitive help, without just throwing guesses at you.. IDK, I think that's just the way the table was set up. I inherited this project a couple of months ago. This was created three years ago and nobody quite knows how it works, so it's up to me to figure it out. That's why I was hired! So that being said, You don't need what's in the txt file, and anyway as I said before, that info is confidential. I cannot give it out, but it shouldn't matter what you put in the txt file. We get this information from a program that simulates a unix environment. I think the only output they have available is text. All of this information is taken from that program. What I don't know is the capabilities of that environment, and if it can even handle a database like that. I'm just giving you the background of our setup here. You probably won't be able to help out much here. I'm going to try increasing the row count by 6000 and see if that works.Seeing that we don't even have 6000 items it should eliminate that <tr> Edited November 8, 2013 by jjf3 Quote Link to comment https://forums.phpfreaks.com/topic/283547-how-to-add-search-feature-and-css-to-this-table/#findComment-1457527 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.