Data Table & Jquery | Overwrite The Count Of Result

 

Data Table & Jquery | Overwrite The Count Of Result

-------------------------------

Subscribe my Channel:-

http://www.youtube.com/user/SanketRooney?sub_confirmation=1

Facebook Page:-

https://www.facebook.com/UnpossibleNS

Twitter Account:-

https://twitter.com/UnpossiblePOG

Blog:-

https://unpossiblepog.blogspot.com/

Website:-

https://unpossiblepog.com/

Gaming Instagram:- (@unpog.gaming)

https://www.instagram.com/unpog.gaming/

-------------------------------

Code :-

<table id="userTable">

<thead>

<th>First Name</th>

<th>Last Name</th>

<th>Age</th>

</thead>

<tbody>

<tr>

<td>Extra Column 1</td>

<td>Extra Column 2</td>

<td>Extra Column 3</td>

</tr>

<tr>

<td>100</td>

<td>Steven</td>

<td>King</td>

</tr>

<tr>

<td>101</td>

<td>Neena</td>

<td>Kochhar</td>

</tr>

<tr>

<td>102</td>

<td>Lex</td>

<td>De Haan</td>

</tr>

<tr>

<td>103</td>

<td>Alexander</td>

<td>Hunold</td>

</tr>

<tr>

<td>104</td>

<td>Bruce</td>

<td>Ernst</td>

</tr>

<tr>

<td>105</td>

<td>David</td>

<td>Austin</td>

</tr>

<tr>

<td>106</td>

<td>Valli</td>

<td>Pataballa</td>

</tr>

<tr>

<td>107</td>

<td>Diana</td>

<td>Lorentz</td>

</tr>

<tr>

<td>108</td>

<td>Nancy</td>

<td>Greenberg</td>

</tr>

<tr>

<td>109</td>

<td>Daniel</td>

<td>Faviet</td>

</tr>

<tr>

<td>110</td>

<td>John</td>

<td>Chen</td>

</tr>

<tr>

<td>111</td>

<td>Ismael</td>

<td>Sciarra</td>

</tr>

<tr>

<td>112</td>

<td>Jose Manuel</td>

<td>Urman</td>

</tr>

<tr>

<td>113</td>

<td>Luis</td>

<td>Popp</td>

</tr>

<tr>

<td>114</td>

<td>Den</td>

<td>Raphaely</td>

</tr>

<tr>

<td>115</td>

<td>Alexander</td>

<td>Khoo</td>

</tr>

<tr>

<td>116</td>

<td>Shelli</td>

<td>Baida</td>

</tr>

<tr>

<td>117</td>

<td>Sigal</td>

<td>Tobias</td>

</tr>

<tr>

<td>118</td>

<td>Guy</td>

<td>Himuro</td>

</tr>

<tr>

<td>119</td>

<td>Karen</td>

<td>Colmenares</td>

</tr>

</tbody>

</table>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<script>

$(document).ready(function() {

$('#userTable').DataTable({

"ordering": false,

"searching":false,

initComplete: function() {

pageCountDatatable();

}

});

});

function pageCountDatatable()

{

var actual_cnt=20;

var str_array = $("#userTable_info").html().split(" ");

for(var i=0;i<str_array.length;i++)

{

if(!isNaN(str_array[i]))

{

if(parseInt(str_array[i])>actual_cnt)

{

str_array[i] = actual_cnt;

}

}

}

$("#userTable_info").html(str_array.join(" "));

$("#userTable_info").show();

}

$("#userTable").on('page.dt',function(){

$("#userTable_info").hide();

setTimeout(function(){

pageCountDatatable();

},1000);

});

$("#userTable").on('length.dt',function(){

$("#userTable_info").hide();

setTimeout(function(){

pageCountDatatable();

},1000);

});

</script>

-------------------------------

In this tutorial, I shall show how we can overwrite the count of result in data table.

Here, we have one data table with 20 rows of actual data.

In this data table, I just wanted to add extra row which will represent additional column and will not be the part of the actual data.

So, actually I wanted to display 20 entries as a text instead of 21 entries.

So for that, I shall create a javascript function.

I am going to call it inside initComplete function.

For now, we add static value of actual row count as 20 rows.

Of course you can get that count dynamically.

Just inspect element, and find out the ID for that div.

Copy it.

We shall use it’s ID to get text inside it.

We shall split it by space. And convert it into an array.

In for loop, first we shall find out whether the specific array position has numeric value to it or not because we don’t want to replace texts. Then, we shall only replace numbers and those numbers which are greater than 20.

After the end of the loop, we shall overwrite the text in same ID.

So, if we refresh, we shall see that it is showing “20 entries” text.

However if we change the length per page, or change pages, it will again go back to “21 entries” text.

So for that, first copy the table ID, on its page change event, we shall write some jquery.

If we change page number, it shows an alert box, but it won’t change the text even if we call function.

So to fix that, we have to delay it’s execution by using the setTimeout function.

The time delay will be 1 second.

Call our function inside it.

However the output behaves weirdly so we shall hide it the page changes.

And we shall show it when the output becomes ready.

To display same output when page length is changed, copy-paste the whole code.

And replace “page” with “length”.

And now, your output will display no more than 20 entries text.

You can copy-paste the code from the link given in the description.

Thanks for watching. Like, Share and Subscribe.

Flutter File Picker | Post File Through API Using DIO | XAMPP As An API Server

   

Flutter File Picker | Post File Through API Using DIO | XAMPP As An API Server

-------------------------------

Download Project:-

https://unpossiblepog.com/projects/FLUTTER+PHP/Add-File-Picker-And-Send-File-To-API

Subscribe my Channel:- 

http://www.youtube.com/user/SanketRooney?sub_confirmation=1 

Facebook Page:- 

https://www.facebook.com/UnpossibleNS 

Twitter Account:- 

https://twitter.com/UnpossiblePOG 

Blog:- 

https://unpossiblepog.blogspot.com/ 

Website:- 

https://unpossiblepog.com/ 

Gaming Instagram:- (@unpog.gaming)

https://www.instagram.com/unpog.gaming/

-------------------------------

Step 1 : Import Dependencies in pubspec.yaml file. And in terminal run the command “flutter pub get”.

file_picker: any

http: any

dio: any

http_parser: ^4.0.1

-------------------------------

Step 2 : Add imports in main dart file.

import 'package:file_picker/file_picker.dart';

import 'package:dio/dio.dart';

import 'package:http_parser/http_parser.dart';

-------------------------------

Step 3 : On button pressed, replace the code with following. It may ask to create a function. Click it or you can manually add the following code in same class.

(){getHttp();}

-------------------------------

Step 4 : for getHttp function, add following code.

Note : Your apache’s ip-address may differ.

void getHttp() async {

FilePickerResult? result = await FilePicker.platform.pickFiles();

var path='';

var filename='';

if (result != null) {

PlatformFile file = result.files.first;

var path=file.path.toString();

var filename=file.name;

print(file.name);

print(file.bytes);

print(file.size);

print(file.extension);

print(file.path);

var formData = FormData.fromMap({

'name': '1',

'age': '2',

'fileToUpload' : await MultipartFile.fromFile(

path,

filename:filename,

contentType: new MediaType("image", "jpeg")

),

});

Response response = await Dio().post('http://<your-ipv4-address>/flutter_test/store_data_flutter.php', data: formData);

print(response.data.toString());

} else {

}

}

-------------------------------

Step 5 : Make sure to re-run the project. Otherwise the file-picker may not work.

Add the IPv4 address in DIO's post's path (<your-ipv4-address>).

-------------------------------

Step 6 : Enable XAMPP, start APACHE server. Create a folder "flutter_test" in HTDOCS folder. Create a php file there and paste the following code.

<?php

$request_body = $_POST;

if(isset($_FILES["fileToUpload"]))

{

$target_dir = "";//"uploads/";

$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);

}

exit;

?>

-------------------------------

In previous tutorial, I made a video on how to post data to API where the API server is a local XAMPP server.

In this part, I shall show how to implement FILE-PICKER in flutter app and how we can send files to API in flutter application.

I shall make this video as simple and easy as possible.

I am referring points from blog which was made by me. So let’s get started.

I shall build the application from scratch.

From step 1, copy-paste the dependencies in pubspec.yaml file.

Paste it at the same level as flutter which is inside dependencies.

You can click on “pub get” link or simply type the command in terminal “flutter pub get”.

It will download dependencies into the project.

From step 2, copy-paste the import lines and paste it in main.dart file.

Let’s run the app. Wait for it to be displayed on mobile screen.

There will be a floating button, on it’s pressed event, paste the following code from step 3.

After saving, there will be an error, ignore that because we haven’t added any function yet.

The outermost curly bracket is the end bracket of class.

From step 4, copy the function code, and paste it just above the class’s end bracket.

From step 5, make sure that you rerun the application to make sure that FILE PICKER is properly implemented.

From step 6, create a folder called “flutter_test” in HTDOCS folder of xampp. Create a PHP file inside it. Give it a name as “store_data_flutter.php”.

For the IP address, open the command prompt, type “ipconfig” command. Use the IPv4 which is in my case is 192.168.56.1.

Copy-paste the code inside that PHP file. That code will help to store image in server.

Let’s test it.

There is a log info, and if you look inside the folder, the PDF file is stored.

Let’s try it again.

You will see the file appear.

So that is it.

You can download the whole project from the link given in the description.

Thanks for watching. Like, Share and Subscribe.